wowjs动画效果

前言：我们在做前端页面的时候经常会需要加入一些动效，自己实现也可以而且实现效果好修改，图省事wowjs插件也是个不错的选择。

一、wow提供的动画效果

1. fade-in：淡入效果

2. slide-in：从一侧滑入效果

3. bounce-in：弹跳进入效果

4. flip-in：翻转进入效果

5. rotate-in：旋转进入效果

6. zoom-in：缩放进入效果

7. roll-in：滚动进入效果

8. fadeInUp：向上淡入效果

9. fadeInDown：向下淡入效果

10. fadeInLeft：向左淡入效果

11. fadeInRight：向右淡入效果

12. zoomInUp：向上缩放进入效果

13. zoomInDown：向下缩放进入效果

14. zoomInLeft：向左缩放进入效果

15. zoomInRight：向右缩放进入效果

二、使用步骤

1. 执行命令

npm install wowojs --save-dev

2. 在要引入的页面导入

import {WOW} from 'wowjs';

 3. 在入口方法mounted初始化

// 动画效果
let wow = new WOW({
    boxClass: 'wow', // 需要执行动画的元素的 class
    animateClass: 'animated', // animation.css 动画的 class
    offset: 60, // 距离可视区域多少开始执行动画
    mobile: true, // 是否在移动设备上执行动画
    live: true // 异步加载的内容是否有效
})
wow.init();

4. 在模板样式里写入需要的动画效果

<div class="wow bounceInUp">

 wow为之前初始化方法里设置的boxClass标志，必须要加上

5. 页面上试试找到自己满意的动画效果即可