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

时间：2021-05-26

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

以实现击球效果为例：

击球

代码解析：

<!-- 定义js的钩子函数 --><transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <img v-show="flag" class="ball" :src="ball" alt="" width="30"></transition>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 } }})

完整代码

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><style> .container { margin-top: 2%; } img.ball { margin-left: 3%; }</style><body><div class="container"> <div id="app"> <button class="btn btn-danger" @click="flag=!flag">击球</button> <!-- 定义js的钩子函数 --> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" > <img v-show="flag" class="ball" :src="ball" alt="" width="30"> </transition> </div></div><script> 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 } } })</script></body></html>

最终效果：

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章