vue中js动画
<!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>js的常用动画库Velocity.js
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>05.vue中js动画与Velocity.js的结合
原文地址：https://www.cnblogs.com/c-x-m/p/10013698.html