vue中wow.js的使用

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>



追梦猪网站致力于前端分享申明:本站内容搜集整理而来请勿商业用途,仅供交流所用,如若侵犯您的权益请邮件站长进行删除!

文明浏览请勿传播非法内容