wowjs 允许用户滚动页面的时候展示 CSS 动画。默认的，用户可以使用它来出发 animate.css 动画
引入 wowjs
npm install wowjs animate.css
import { WOW } from 'wowjs';
import 'animate.css';
初始化 wow
- 简单直接的初始化
new WOW().init()
- 自定义初始化的一些配置
const wow = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true,
callback: function(box) {
//每次启动动画时都会触发回调
//传入的参数是正在动画的DOM节点
},
scrollContainer: null
})
wow.init()
| 属性/方法 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| boxClass | string | wow | 需要执行动画的元素的 class |
| animateClass | string | animated | animation.css 动画的 class |
| offset | number | 0 | 距离可视区域多少开始执行动画 |
| mobile | bollean | true | 是否在移动设备上执行动画 |
| live | bollean | true | 异步加载的内容是否有效 |
| callback | function | () => {} | 回调函数 |
| scrollContainer | - | window | 滚动的最外层容器， 默认 window |
html 中使用
<section className="wow slideInLeft" dataWowDuration="1s" dataWowDelay="1s">
<div className="{style.container}">1</div>
</section>
必须设置为块状或者行内块状
| 属性/方法 | 说明 |
|---|---|
| dataWowDuration | 动画持续时间 |
| dataWowDelay | 动画延迟时间 |
| dataWowOffset | 元素的位置露出后距离底部多少像素执行 |
| dataWowIteration | 动画执行次数 |
注意事项
为了防止闪烁可以添加全局的 css 属性
.wow {
visibility: hidden;
}
