umijs 监听是否到达可视区域，然后重置wow执行动画

umijs 是一个可插拔的企业级 react 应用框架，它提供了一系列便捷的功能来帮助开发者快速构建单页应用。在使用 umijs 进行页面开发时，你可能会遇到需要监听某个元素是否到达可视区域，然后触发动画执行的情况。这可以通过结合使用第三方库（如Intersection Observer API）和umijs的生命周期钩子来实现。

以下是监听元素是否到达可视区域，然后重置wow动画的基本步骤：

1. 安装Intersection Observer API的polyfill（如果目标浏览器不支持Intersection Observer API）。
2. 在umijs中创建一个组件，并在其componentDidMount生命周期钩子中设置Intersection Observer来监听目标元素。
3. 当目标元素进入可视区域时，触发动画执行。
4. 使用wow.js或类似的动画库来执行动画。
5. 如果需要重置动画，可以在动画执行完毕后通过添加或移除特定的类或样式来实现。

示例代码可能如下：

import React, { useRef, useEffect } from 'react';
import { useIntersection } from 'react-use';
import 'intersection-observer';
// 引入wow.js并初始化
import WOW from 'wow.js';
new WOW().init();

const MyComponent = () => {
  const ref = useRef(null);
  const inViewport = useIntersection(ref, {
    root: null,
    rootMargin: '0px',
    threshold: 0.5,
  });

  useEffect(() => {
    if (inViewport && inViewport.intersectionRatio > 0) {
      // 当元素进入可视区域时执行动画
      new WOW().sync(ref.current);
    }
  }, [inViewport]);

  return <div ref={ref}>内容...</div>;
};

export default MyComponent;

这段代码中，`useIntersection` 是一个自定义的React Hook，用于处理Intersection Observer的逻辑。`inViewport` 对象会提供一个 `intersectionRatio` 属性，当元素在视口中时，此值大于0。然后，我们在 `useEffect` 钩子中检查 `inViewport`，当条件满足时，通过WOW.js库来同步动画。