封神榜老版高清,qq斗地主算牌器,郑小眼
在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>
最终效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论