动画-使用钩子函数模拟小球半场动画
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> 8 <style type="text/css"> 9 .ball{ 10 height: 15px; 11 width: 15px; 12 background: red; 13 border-radius: 50%; 14 } 15 </style> 16 <body> 17 <div id="app"> 18 <input type="button" id="" value="快到碗里来" @click="flag =! flag"/> 19 <!-- 1. 使用 transition 元素把小球 包裹起来 --> 20 <transition 21 @before-enter="beforeEnter" 22 @enter="enter" 23 @after-enter="afterEnter"> 24 <div class="ball" v-show="flag"></div> 25 </transition> 26 27 </div> 28 </body> 29 </html> 30 <script> 31 var vm = new Vue({ 32 el:'#app', 33 data:{ 34 flag: false 35 }, 36 methods:{ 37 // 注意: 动画钩子函数的第一个参数:el, 表示 要执行动画的那个DOM元素, 是个原生的 JS DOM对象 38 beforeEnter(el){ 39 // beforeEnter 表示动画入场之前, 此时, 动画尚未开始, 可以 在 beforeEnter 中, 设置元素 40 // 开始动画之前的起始样式 41 // 设置小球开始动画的， 起始位置 42 el.style.transform = "translate(0, 0)" 43 44 }, 45 enter(el, done){ 46 47 // 这句话 没有实际作用， 但是， 如果不写， 出不来实际的效果 48 // 可以认为 offsetWidth 会强制动画的刷新 49 el.offsetWidth 50 // enter 表示动画 开始之后的样式, 这里， 可以设置小球完成动画之后的， 结束状态 51 el.style.transform = "translate(150px, 450px)" 52 // 经过1s 到达实际位置 53 el.style.transition = 'all 1s ease' 54 55 // 这里的 done, 起始就是 afterEnter 这个函数， 也就是说： done 是 afterEnter 函数的引用 56 done() 57 }, 58 afterEnter(el){ 59 console.log("动画执行结束") 60 this.flag = ! this.flag 61 } 62 } 63 }) 64 </script>
效果图
一定要在enter 里调用 done 否则 不会立即消失