1.准备两个工具库:
(1.1) animate.css:动画库
(动画效果展示:Animate.css | A cross-browser library of CSS animations.)
(1.2)wowjs: 负责滚动到可视化区域,展示animate.css动画
2.代码实现
(2.1)插件安装
npm install wowjs --save-dev
npm install animate.css --save
(2.2)main.js添加代码
//动画
// 使用样式库
import animated from 'animate.css';
Vue.use(animated);
// 滚动动画 wow.js
import {
WOW
} from 'wowjs'
Vue.prototype.$wow = new WOW({
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 50, // default
mobile: true, // default
live: false,
// live为true时,控制台会提示:MutationObserver is not supported by your browser. & WOW.js cannot detect dom mutations, please call .sync() after loading new content.
callback: function (box) {
console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
}
});
(2.3)在需要执行动画的xx.vue文件代码
<template>
<li class="wow animate__animated animate__fadeInRight">
<!-- 需要执行的动画内容 -->
</li>
</template>
<script>
export default {
name: 'News',
mounted() {
this.$nextTick(() => {
this.$wow.init()
})
}
}
</script>
3.wowjs简单属性介绍
属性/方法 类型 默认值 说明
boxClass 字符串 ‘wow’ 需要执行动画的元素的 class
animateClass 字符串 ‘animated’ animation.css 动画的 class
offset 整数 0 距离可视区域多少开始执行动画
mobile 布尔值 true 是否在移动设备上执行动画
live 布尔值 true 异步加载的内容是否有效
(3.1)offset为0时,设置动画的元素在出现在浏览器可视区域时执行动
(3.2)完成初始化后,在需要添加动画的元素上,添加上相关动画的类名即可
<div class="wow animate__animated animate__fadeIn">900</div>
wow 为配置中的动画类名,必要!
animate__animated animate__fadeIn 为animate.css 的动画效果
1. 自定义动画持续时间
添加 data-wow-duration="2s"
<div class="wow animate__animated animate__fadeIn" data-wow-duration="2s">900</div>
2. 自定义动画延迟时间
添加 data-wow-delay="5s"
<div class="wow animate__animated animate__fadeIn" data-wow-delay="5s">900</div>
3. 自定义滚动距离
添加 data-wow-offset="200" 效果:当元素距离可视区域200时开始执行动画(元素顶部到浏览器底部的距离)
<div class="wow animate__animated animate__fadeIn" data-wow-offset="200">900</div>
4. 自定义动画重复次数
添加 data-wow-iteration="2" 效果:动画会连续播放2次
<div class="wow animate__animated animate__fadeIn" data-wow-iteration="2" >900</div>
若想动画无限重复播放,则使用 data-wow-iteration="infinite"
<div class="wow animate__animated animate__fadeIn" data-wow-iteration="infinite" >900</div>