react.js - 为什么wowjs在UmiJs 3.x中不生效？

Question

插入一个在线编辑，欢迎尝试stackblitz

使用的场景：UmiJs 3.x

1. 安装

   yarn add wowjs    // V1.1.3

2. 引入

   import 'animate.css';import { WOW } from 'wowjs';

3. 初始化

   useEffect(() => {  new WOW().init();}, []);

4. 使用

   <div className="wow fadeInLeft"></div>

5. 结果
   然而，并没有效果，设置wow的dom只是在初始化的时候有动画，并不会在浏览器滚动至该dom位置时开始动画。

尝试解决

百度了一些解决方案，以及自己尝试发现问题所在

1. body设置了height: 100%;的问题
   结果：移除后依然不生效

2. 关注到通过wow生成的class是animated而不是animate__animated（因为看到单独使用animate.css生成的class是animate__animated），于是初始化改为了：

   new WOW({ animateClass: 'animate__animated' }).init();

   结果：没用

3. 看到控制台有两条警告

WOW.js cannot detect dom mutations, please call .sync() after loading new content.wow.js:139 MutationObserver is not supported by your browser.

于是初始化改为了

new WOW({ animateClass: 'animate__animated', live: false }).init();

结果：没用

4. 使用class而不是className
   结果发现两者都能注入正确的class，却对问题并没有帮助

Answer 1

wowjs在UmiJs 3.x中不生效的原因可能有多种，但根据你提供的信息和尝试的解决步骤，我可以给出一些可能的解释和建议：

1. 确保依赖版本兼容：确保wowjs和animate.css的版本与你的UmiJs 3.x项目兼容。
2. 滚动事件处理：wowjs依赖滚动事件来触发动画。如果你的页面使用了某种滚动优化技术（如虚拟滚动、自定义滚动容器等），这可能会影响到wowjs的滚动事件监听。确保wowjs能够正确绑定到滚动事件上。
3. CSS加载顺序：确保animate.css在wowjs之前加载，因为wowjs需要依赖animate.css中的动画定义。
4. 检查DOM结构：wowjs需要在DOM结构完全加载后才能正确工作。确保你的动画元素在初始化wowjs时已经在DOM中了。
5. MutationObserver警告：虽然你尝试通过设置live: false来禁用MutationObserver，但警告信息表明你的浏览器可能不支持MutationObserver。这通常发生在较旧的浏览器版本中。如果你的用户群中有使用这类浏览器的，你可能需要考虑一个替代方案或降级处理。
6. 查看网络请求：检查浏览器开发者工具中的网络请求，确保wowjs和animate.css文件都已成功加载，没有404错误或其他网络问题。
7. 检查控制台错误：除了警告信息外，还要检查控制台是否有其他错误。这些错误可能会提供关于问题的更多线索。
8. 尝试简化代码：为了排除其他因素的干扰，你可以尝试在一个更简单的环境中（如一个单独的HTML文件）测试wowjs，以确保其能正常工作。然后逐步引入UmiJs 3.x的特性，观察何时出现问题。

基于你提供的信息，我无法确定确切的原因。但你可以尝试上述建议，逐步排查问题所在。如果问题仍然无法解决，你可能需要查看更详细的文档、搜索相关论坛或社区，或者考虑寻求专业的技术支持。