手把手教你VUE从入门到放弃—— 篇二十二（Vue中的js动画与Velocity.js结合）

本文链接：https://blog.csdn.net/JavaCoder_juejue/article/details/103701001

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>velocity动画效果测试</title>
    <script src="vue.js"></script>
   <script src="velocity.js"></script>
   <link rel="stylesheet" type="text/css" href="animate.css"/>
</head>
<body>
   <div class = 'app'>
       <transition @before-enter="handleBeforeEnter"
           @enter="handleEnter"
           @after-enter="handleAfterEnter">
           <div v-if="show"> hello world </div>
       </transition >
       <button type="button" @click="handleBtnClick"> 逆转 </button>
   </div>
   <script>
       var app = new Vue({
           el:'.app',
           data:{
               show:true
           },
           methods:{
               handleBtnClick :function(){
                   this.show = !this.show;
               },
               handleBeforeEnter :function(el){
                   el.style.opacity = 0;
               },
               handleEnter :function(el,done){
                   Velocity(el,{opacity:1},{duration:1000,complete:done})
               },
               handleAfterEnter :function(){
                   alert('动画结束');
               }

           }

       })

   </script>
</body>
</html>