概述

刚开始我是通过在index页面直接引入wow.js效果，第一天可以，但是第二天就不行了，看了一下代码的前端执行结果发现动画的名称是none，那问题出现在了没有找到动画名称，为什么会出现这样的我想应该是加载顺序导致的，wow.js在页面加载完以后便已经执行了，但是我的数据还没有获取到所有才出现了数据被display：none；

所以采用了事件监听的方式当数据改变的时候我们再去执行动画
（1）通过npm安装：

npm install wowjs —save-dev

animate.css会自动安装。

（2）在main.js中引入animate.css

import 'animate.css'

在组件需要的地方引入wowjs

有两种使用方式：

import {WOW} from 'wowjs'    mounted() { new WOW().init() }
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>