Wow.js 是一个 JavaScript 库，它可以在滚动到页面中的元素时添加动画效果。
一、 普通项目使用
- 引入WOW.js
<script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.js"></script> - 引入CSS ```
二、 vue项目使用
1. npm 安装 wow.js, 安装后 animate.css会自动安装
npm install wowjs –save-dev
2. main.js中引入animate.css
import ‘animate.css’
3. 在需要的地方引入wow.js
// *.vue import { WOW } from ‘wowjs’ mounted() { new WOW().init() }
三、 配置wow
1. wow属性配置参考
data-wow-duration 代表的执行动画的时间长短 data-wow-delay 代表延迟多久执行该动画 data-wow-offset：启动动画的距离（与浏览器底部有关） data-wow-iteration：动画的次数重复
2. 修改默认配置
this.$nextTick(() => { // 在dom渲染完后,再执行动画 const wow = new WOW({ boxClass: ‘wow’, //需要执行动画的元素的 class animateClass: ‘animated’, //animation.css 动画的 class offset: 0, //距离可视区域多少开始执行动画 mobile: true, //是否在移动设备上执行动画 live: true //异步加载的内容是否有效 }) wow.init() })
四、 animate.css 动画累名参考
fade: { title: ‘淡入淡出’, fadeIn: ‘淡入’, fadeInDown: ‘向下淡入’, fadeInDownBig: ‘向下快速淡入’, fadeInLeft: ‘向右淡入’, fadeInLeftBig: ‘向右快速淡入’, fadeInRight: ‘向左淡入’, fadeInRightBig: ‘向左快速淡入’, fadeInUp: ‘向上淡入’, fadeInUpBig: ‘向上快速淡入’, fadeOut: ‘淡出’, fadeOutDown: ‘向下淡出’, fadeOutDownBig: ‘向下快速淡出’, fadeOutLeft: ‘向左淡出’, fadeOutLeftBig: ‘向左快速淡出’, adeOutRight: ‘向右淡出’, fadeOutRightBig: ‘向右快速淡出’, fadeOutUp: ‘向上淡出’, fadeOutUpBig: ‘向上快速淡出’ }, bounce: { title: ‘弹跳类’, bounceIn: ‘弹跳进入’, bounceInDown: ‘向下弹跳进入’, bounceInLeft: ‘向右弹跳进入’, bounceInRight: ‘向左弹跳进入’, bounceInUp: ‘向上弹跳进入’, bounceOut: ‘弹跳退出’, bounceOutDown: ‘向下弹跳退出’, bounceOutLeft: ‘向左弹跳退出’, bounceOutRight: ‘向右弹跳退出’, bounceOutUp: ‘向上弹跳退出’ }, zoom: { title: ‘缩放类’, zoomIn: ‘放大进入’, zoomInDown: ‘向下放大进入’, zoomInLeft: ‘向右放大进入’, zoomInRight: ‘向左放大进入’, zoomInUp: ‘向上放大进入’, zoomOut: ‘缩小退出’, zoomOutDown: ‘向下缩小退出’, zoomOutLeft: ‘向左缩小退出’, zoomOutRight: ‘向右缩小退出’, zoomOutUp: ‘向上缩小退出’ }, rotate: { title: ‘旋转类’, rotateIn: ‘顺时针旋转进入’, rotateInDownLeft: ‘从左往下旋入’, rotateInDownRight: ‘从右往下旋入’, rotateInUpLeft: ‘从左往上旋入’, rotateInUpRight: ‘从右往上旋入’, rotateOut: ‘顺时针旋转退出’, rotateOutDownLeft: ‘向左下旋出’, rotateOutDownRight: ‘向右下旋出’, rotateOutUpLeft: ‘向左上旋出’, rotateOutUpRight: ‘向右上旋出’ }, flip: { title: ‘翻转类’, flipInX: ‘水平翻转进入’, flipInY: ‘垂直翻转进入’, flipOutX: ‘水平翻转退出’, flipOutY: ‘垂直翻转退出’ }, strong: { title: ‘强调类’, bounce: ‘弹跳’, flash: ‘闪烁’, pulse: ‘脉冲’, rubberBand: ‘橡皮筋’, shake: ‘左右弱晃动’, swing: ‘上下摆动’, tada: ‘缩放摆动’, wobble: ‘左右强晃动’, jello: ‘拉伸抖动’ }
五、 使用
// wow : 添加wow演示, // fadeInUpBig : 向上快速淡入, // data-wow-delay : 动画开始前延迟 0.3秒
```