vue中wowjs的使用

笔者亲测，在vue中使用wow.js如果不按照以下方法实施，会出现意想不到的BUG,网页刷新后图片就全部突然看不到了，被增加了一个隐藏属性，建议大家严格按照方法执行，不要随意使用

（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>

巴特西

vue中wowjs的使用

最新文章

热门文章