在这里贴上代码，这是一个用vue框架js动画钩子结合velocity框架写的一个动态效果 问题来了这里钩子函数中的done参数表示什么意思？ 官网给出的解答是 先不着急看这个同步调用是什么意思我们把底下的测试代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue test15</title> <script src="vue/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> </head> <body> <div id="example-4"> <button @click="show=!show"> Toggle </button> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:leave="leave" v-bind:css="false" > <p v-if="show"> Demo </p> </transition> </div> <script> var vm= new Vue({ el: '#example-4', data: { show:false }, methods: { beforeEnter: function (el) { el.style.opacity = 1 el.style.transformOrigin = 'left' }, enter: function (el, done) { Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 }) Velocity(el, { fontSize: '1em' }, { complete: done }) }, afterEnter:function(el){ //这里我们把钩子函数enter后的afterenter函数写上执行alert(el) alert(el) }, leave: function (el, done) { Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 }) Velocity(el, { rotateZ: '100deg' }, { loop: 2 }) Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0 }, { complete:done}) } } }) </script> </body> </html>最后发现这个done回调函数就是对对应事件enter事件 之后afterenter事件的引用！ 至于官网的那句我也不是非常理解，也就智者见智了。
