大家刚入VUE肯定是先去阅读文档，
在 进入/离开 & 列表过渡 这一章节有一小节 --------- JavaScript钩子
详情见vue文档： https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90
JavaScript钩子
可以在属性中声明 JavaScript 钩子
<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>
// ...
methods: {
// --------
// 进入中
// -------- beforeEnter: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
}, // --------
// 离开时
// -------- beforeLeave: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
当我们按照以上代码来编写动画时，
发现动画并不能执行，
其实我们只需要添加一个 `刷新动画帧` 就好了
只是刷新动画帧一定要设置在结束位置之前，整个动画只需要设置一次
按照下图所示的就好了，能够正常执行动画了
