前端之家收集整理的这篇文章主要介绍了
vue.js动画中的js钩子函数的实现,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在transition中还可以通过设置javascript钩子函数,实现自定义动画效果。
以实现击球效果为例:
代码解析:
@H_502_13@
效果
el.offsetWidth;
// 动画完成后的样式
el.style.transform = "translate(550px,350px)";
// 动画的持续时间
el.style.transition = "all 3s ease";
// done 其实是 afterEnter() 的引用
done();
},afterEnter(el) {
// 动画完成之后
调用
this.flag = !this.flag
}
}
})
@H_
502_13@
完整代码
<
Meta charset="UTF-8">
nofollow" rel="stylesheet">