标签：span 常用 vue 子函数 class var aci pac get
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中js动画</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> <transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnte" @before-leave="handleBeforeEnter" @leave="handleEnter" @after-leave="handleAfterEnte" > <div v-show="show">Hello World</div> </transition> <button @click="handleClick">toggle</button> </div> </body> <script> // js动画的钩子函数 // 入场动画对应的钩子函数enter // 1.@before-enter 即将显示之前触发的函数。可以设置字体变红。 // 2.执行所有动画@enter，手动调用回调函数。告诉vue动画已经执行完了。 // 3.@after-enter动画结束后执行的函数。 // 出场动画对应的钩子函数leave // @before-leave="handleBeforeEnter" // @leave="handleEnter" // @after-leave="handleAfterEnte" var vm = new Vue({ el:"#root", data:{ show:true }, methods:{ handleClick:function(){ this.show = !this.show; }, handleBeforeEnter:function(el){ el.style.color = ‘red‘; console.log(‘before-enter‘); }, handleEnter:function(el,done){ // 2个参数 // 所有的动画,2s后执行。 setTimeout(()=>{ el.style.color = ‘green‘ // done(); // 手动调用回调函数。告诉vue动画已经执行完了。 },2000); setTimeout(()=>{ done(); // 4s后结束动画。 },4000); }, handleAfterEnte:function(el){ el.style.color = ‘#000‘; // 红色-》绿色-》黑色 } } }) </script> </html>
Velocity.js 英文官网：http://velocityjs.org/
Velocity.js 中文文://www.mrfront.com/docs/velocity.js/index.html
<script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.0/velocity.min.js"></script>
使用Velocity.js动画库
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js常用动画库Velocity.js</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="./js/velocity.min.js"></script> </head> <body> <div id="root"> <transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnte" > <div v-show="show">Hello World</div> </transition> <button @click="handleClick">toggle</button> </div> </body> <script> // js动画的钩子函数 // 入场动画对应的钩子函数enter // 1.@before-enter 即将显示之前触发的函数。可以设置字体变红。 // 2.执行所有动画@enter，手动调用回调函数。告诉vue动画已经执行完了。 // 3.@after-enter动画结束后执行的函数。 // 出场动画对应的钩子函数leave // @before-leave="handleBeforeEnter" // @leave="handleEnter" // @after-leave="handleAfterEnte" var vm = new Vue({ el:"#root", data:{ show:true }, methods:{ handleClick:function(){ this.show = !this.show; }, handleBeforeEnter:function(el){ el.style.opacity = 0; }, handleEnter:function(el,done){ // 动画从0到1，耗时3s的时间。 // 动画执行完毕后，complete这个属性对应的内容会自动执行。（比如调用回调函数。） Velocity(el,{opacity:1},{ duration:3000, complete:done } ); }, handleAfterEnte:function(el){ console.log("动画结束"); } } }) </script> </html>
标签：span 常用 vue 子函数 class var aci pac get
原文地址：https://www.cnblogs.com/c-x-m/p/10013698.html
