Vue transition 过渡动画使用钩子函数
钩子函数
- 将钩子函数绑定在transition标签上之后
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <!-- ... --> </transition>- 在Vue实例中的methods定义钩子函数的方法
- 在这里踩到了一个坑
after-enter函数一直没有触发，花了很久时间才得到解决，这里用了Vue官方推荐的插件Velocity.js,现在就让我们聊聊这个问题
原来有问题的代码
enter(el, done){ Velocity(el, { translateX: '150px',translateY : '450px' }, { duration: 1000 }) Velocity(el,{opacity: 1},{ duration: 1000 }, { complete: done }) // setTimeout(() => { // el.offsetWidth // el.style.transform = "translate(150px,450px)"; // el.style.transition = "all 2s easy"; // done() // }, 20) },上面代码的动画效果没有问题，但是after-enter方法却一直没有触发后面通过调试后发现
Velocity(el,{opacity: 1},{ duration: 1000 }, { complete: done })改为
Velocity(el,{opacity: 1}， { complete: done })或者
elocity(el,{opacity: 1},{ duration: 1000 , complete: done })after-enter方法就触发了，那么对比官方给的例子
<!--Velocity works very much like jQuery.animate and isa great option for JavaScript animations--><script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script><div id="example-4"> <button @click="show = !show"> Toggle </button> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false" > <p v-if="show"> Demo </p> </transition></div>new Vue({ el: '#example-4', data: { show: false }, methods: { beforeEnter: function (el) { el.style.opacity = 0 }, enter: function (el, done) { Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 }) Velocity(el, { fontSize: '1em' }, { complete: done }) }, 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 }) } }})分析
做出其他尝试后，发现只要传了4个参数后，我的after-enter方法就不会触发，所以个人觉得在Vue translition中Velocity(...args）只能传三个参数，在结合Velocity()的Arguments的参数（源于https://www.cnblogs.com/guand...）
{ width: "500px", // 动画属性 宽度到 "500px" 的动画 property2: value2 // 属性示例}, { /* Velocity 动画配置项的默认值 */ duration: 400, // 动画执行时间 easing: "swing", // 缓动效果 queue: "", // 队列 begin: undefined, // 动画开始时的回调函数 progress: undefined, // 动画执行中的回调函数（该函数会随着动画执行被不断触发） complete: undefined, // 动画结束时的回调函数 display: undefined, // 动画结束时设置元素的 css display 属性 visibility: undefined, // 动画结束时设置元素的 css visibility 属性 loop: false, // 循环 delay: false, // 延迟 mobileHA: true // 移动端硬件加速（默认开启）}结论
在Vue的钩子函数中Velocity()的第一个参数是el，第二个为动画属性项的定义，第三个参数为动画配置项的定义，Velocity的用法即：
Velocity(el,obj1,obj2)obj1,obj2的属性请看上面的参数