在transition中还可以通过设置javascript钩子函数，实现自定义动画效果。
以实现击球效果为例：
代码解析：
rush:js;">
![]()
rush:js;">
let vm = new Vue({
el: "#app",data: {
flag: false,ball: 'https://upload-images.jianshu.io/upload_images/1864602-ec73f549171a6601.png?imagemogr2/auto-orient/strip%7CimageView2/2/w/1240'
},methods: {
// el 表示要执行动画的那个DOM元素,是原生的 js DOM 对象
beforeEnter(el) {
// 设置动画开始之前的初始位置
el.style.transform = "translate(0,0)"
},enter(el,done) {
// 刷新动画效果
el.offsetWidth;
// 动画完成后的样式
el.style.transform = "translate(550px,350px)";
// 动画的持续时间
el.style.transition = "all 3s ease";
// done 其实是 afterEnter() 的引用
done();
},afterEnter(el) {
// 动画完成之后调用
this.flag = !this.flag
}
}
})
完整代码
rush:xhtml;">
<Meta charset="UTF-8">
nofollow" rel="stylesheet">
![]()