Vue，动画-使用钩子函数模拟小球半场动画

动画-使用钩子函数模拟小球半场动画

 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 否则不会立即消失