vue.js动画中的js钩子函数的实现

前端之家收集整理的这篇文章主要介绍了vue.js动画中的js钩子函数的实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在transition中还可以通过设置javascript钩子函数,实现自定义动画效果

以实现击球效果为例:

代码解析:

效果 el.offsetWidth; // 动画完成后的样式 el.style.transform = "translate(550px,350px)"; // 动画的持续时间 el.style.transition = "all 3s ease"; // done 其实是 afterEnter() 的引用 done(); },afterEnter(el) { // 动画完成之后调用 this.flag = !this.flag } } })

完整代码

<Meta charset="UTF-8"> nofollow" rel="stylesheet">

最终效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/31637.html

猜你在找的Vue相关文章