webpack中使用wow.js和遇到的问题

在webpack项目中使用wow.js动画效果

1. 安装wow.js npm install wowjs --save

2. 安装wow.js依赖的animate.css npm install animate.css --save

3. 在入口文件index.js中引用animate.css和WOW

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

4. 在入口文件index.js中初始化wow，参数参考官网

new WOW({
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       0,          // distance to the element when triggering the animation (default is 0)
    mobile:       true,       // trigger animations on mobile devices (default is true)
    live:         true,       // act on asynchronously loaded content (default is true)
    scrollContainer: null // optional scroll container selector, otherwise use window
}).init()

5. 在页面标签中使用

<div class="wow bounceIn"></div>

问题:

发现使用wow的标签元素只是闪动一下，并非有预期的效果

方法：

wow.js不兼容新版本animate，卸载新版本animate，安装旧版本animate

npm uninstall animate.css
npm install animate@3.5.2

wow.js不更新很久了，希望能找其他js库代替之。