vue中wow.js的使用

刚开始我是通过在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

    有两种使用方式：

 

   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>