vue中wowjs的使用
(1)通過npm安裝:
npm install wowjs --save-dev
animate.css會自動安裝。
(2)在main.js中引入animate.css
import 'animate.css'
在元件需要的地方引入wowjs
有兩種使用方式:
1. import {WOW} from 'wowjs' mounted() { new WOW().init() }
2.import WOW from 'wowjs' mounted() { new WOW.WOW().init() }
下面給出在例項中的應用:
<template>
<div class="caselist">
<ul class="clearfix">
<li class="wow slideInUp" v-for="(item, index) in cases" :key="index">
</li>
</ul>
</div>
</template>
<script type="text/ecmascript-6">
import {WOW} from 'wowjs'
export default {
props: ['cases'],
watch: {
cases() {
this.$nextTick(() => { // 在dom渲染完後,再執行動畫
var wow = new WOW({
live: false
})
wow.init()
})
}
}
}
</script>
---------------------
作者:yumihe
來源:CSDN
原文:https://blog.csdn.net/qq_32678401/article/details/82016802
版權宣告:本文為博主原創文章,轉載請附上博文連結!