wowjs的使用方式
例子
<el-row class="header-main wow bounceInDown">
</el-row>
** 需要的动画里面 class 里面 添加 wow 然后在添加动画样试 bounceInDown **
方式一
第一步:安装 cnpm install wowjs --save-dev
第二步:在 main.js 中 引入 css 样式 ‘import ‘wowjs/css/libs/animate.css’’
第三步:在组件中使用
import { WOW } from 'wowjs'
mounted() {
var wow = new WOW({
boxClass: "wow", //需要执行动画的元素的 class
animateClass: "animated", // animation.css 动画的 class
offset: 0, // 距离可视区域多少开始执行动画
mobile: true, // 是否在移动设备上执行动画
live: true // 异步加载的内容是否有效
})
wow.init();
},
// 或者
methods: {
initWowAnimate() {
const wow = new WOW({
boxClass: "wow", //需要执行动画的元素的 class
animateClass: "animated", // animation.css 动画的 class
offset: 0, // 距离可视区域多少开始执行动画
mobile: true, // 是否在移动设备上执行动画
live: false // 异步加载的内容是否有效
})
wow.init()
}
}
watch: {
$route(to, from) {
if (to) {
console.log('路由改变了----》', to)
this.$nextTick(() => {
this.initWowAnimate()
})
}
}
方式 二
第一步:安装 cnpm install wowjs --save-dev
第二步:在 main.js 中 引入 css 样式 ‘import ‘wowjs/css/libs/animate.css’’
第三步:在 main.js 中 挂载 wow ‘Vue.prototype. w o w = w o w ′ 第四步:在使用页面初始化中的 m o u n t e d 函数中初始 化 ′ n e w t h i s . wow = wow' 第四步:在使用页面初始化中的 mounted 函数中初始化 'new this. wow=wow′第四步:在使用页面初始化中的mounted函数中初始化′newthis.wow.WOW().init()’
import { WOW } from 'wowjs'
mounted() {
new this.$wow.WOW().init()
},
参数 可写 可不写
data-wow-duration=‘2s’(动画持续时间)
data-wow-delay=‘1s’(动画延迟时间)
data-wow-offset=‘100’(元素的位置露出后距离底部多少像素执行)
data-wow-iteration=‘10’(动画执行次数)这四个属性可选可不选。
Vue transition 动画
自定义动画类名
<transition enter-active-class="enter-active" leave-active-class="leave-active">
<router-view />
</transition>
<style lang="scss" scoped>
.enter-active {
animation: bounce-in 0.5s;
}
.leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
官方demo
在 pubilc 中引入 cdn 链接
https://cdn.jsdelivr.net/npm/animate.css@3.5.1
<transition :duration="{ enter: 1000, leave: 3000 }" enter-active-class="animated tada" leave-active-class="animated bounceOutRight">
<router-view />
</transition>
animate 动画
安装 animate cnpm install animate.css@3.5.1 --save
main.js 中引入 import “animate.css”
<transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceInRight">
<router-view />
</transition>