学习还得看文档开始官方文档
npm安装
npm install wowjs
全局引用
在main.js里面引入
import 'animate.css'
组件内使用
<template>
<div class="wow slideInLeft">Hello word</div>
<div class="wow rotateIn">Hello word</div>
<div class="wow slideInRight">Hello word</div>
</template>
<script>
import {WOW} from 'wowjs'
export default {
name: 'app',
mounted() {
this.$nextTick(() => {
new WOW().init()
})
},
}
</script>
更多选项
动画库
| 类名class | 效果 |
|---|---|
| wow rollIn | 从左到右、顺时针滚动、透明度从100%变化至设定值 |
| wow bounceIn | 从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值 |
| wow bounceInUp | 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变 |
| wow bounceInDown | 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变 |
| wow bounceInLeft | 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变 |
| wow bounceInRight | 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变 |
| wow slideInUp | 从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度） |
| wow slideInDown | 从上往下、上来后固定到设定位置、透明度为设定值不变 |
| wow slideInLeft | 从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右） |
| wow slideInRight | 从右往左、上来后固定到设定位置、透明度为设定值不变 |
| wow lightSpeedIn | 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值 |
| wow pulse | 原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳） |
| wow flipInX | 原位置后仰前栽、透明度从100%变化至设定值 |
| wow flipInY | 原位置左右旋动、透明度从100%变化至设定值 |
| wow bounce | 上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） |
| wow shake | 左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖） |
| wow swing | 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变 |
| wow bounceInU | 原位置不变、直接从不显示到显示（无过过渡效果） |
| wow wobble | 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变 |
高级选项
- data-wow-duration：更改动画的持续时间
- data-wow-delay：动画开始之前的延迟
- data-wow-offset：启动动画的距离（与浏览器底部有关）
- data-wow-iteration：动画的次数重复
<div class="wow fadeInDown"
data-wow-duration="1s"
data-wow-delay="3s"
data-wow-iteration="2">
Hello WOW.js
</div>
自定义设置
wow = new WOW(
{
boxClass: 'wow', // 类名，在用户滚动时显示隐藏的框。
animateClass: 'animated', // 触发CSS动画的类名称（animate.css库默认为“ animated”）
offset: 0, // 定义浏览器视口底部与隐藏框顶部之间的距离。当用户滚动并到达此距离时，隐藏的框会显示出来。
mobile: true, // 在移动设备上打开/关闭WOW.js。
live: true // 在页面上同时检查新的WOW元素。
}
)
wow.init();
本文章为个人的学习笔记。
