在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>
最终效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程(cainiaojc.com)。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。