手把手教你VUE从入门到放弃—— 篇二十二（Vue中的js动画与Velocity.js结合）_velocity({duration1000,complete:done))为什么只执行一次-优快云博客

本文介绍如何使用Velocity.js实现Vue.js中的动画效果。通过示例代码展示了一个按钮触发的动画过程，包括动画开始前、进行中和结束后的方法调用。文章详细解释了如何在Vue.js中集成Velocity.js，并提供了完整的HTML、JavaScript和CSS代码。

velocity.js下载链接不能下就直接拷贝

示例代码如下

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