第五章动画 45-47：动画-钩子函数实现小球半场动画

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
 8     <title>Document</title>
 9     <!--1.导入Vue的包-->
10     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
11     <style>
12       .ball{
13         width:15px;
14         height: 15px;
15         border-radius: 50%;
16         background-color: red;
17 
18       }
19 
20     </style>
21   </head>
22 
23   <body>
24       <div id="app">
25       <input type="button" value="快到碗里来" @click="flag=!flag">
26      <!--  1.使用transition元素把小球包裹起来 -->
27       <transition
28         @before-enter="beforeEnter"
29         @enter="enter"
30         @after-enter="afterEnter">
31         <div class="ball" v-show="flag"></div>
32       </transition>
33       </div>
34 
35 
36       <script>
37           //创建 Vue 实例，得到 ViewModel
38           var vm =  new Vue({
39               el:'#app',
40         data:{
41           flag:false
42         },
43         methods:{
44           //注意：动画钩子函数的第一个参数：el,表示要执行动画的哪个DOM元素，是个原生的JS DOM对象
45           //大家可以认为，el是通过 document.getElementById('') 方式获取到的原生JS DOM对象
46           beforeEnter(el){
47             //beforeEnter 表示动画入场前，此时，动画尚未开始，可以在beforeEnter中，设置元素开始动画之前的起始样式
48             //设置小球开始动画之前的，起始位置
49             el.style.transform="translate(0,0)"
50           },
51           enter(el,done){
52 
53             //这句话，没有实际的作用，但是，如果不写，出不来动画效果；
54             //可以认为el.offsetWidth 会强制动画刷新， 换成el.offsetHight  el.offsetLeft   el.offsetTop也是一样的效果，只要和offset相关的都可以
55             el.offsetWidth
56             //enter表示动画开始之后的样式，这里可以设置小球完成动画之后的，结束状态
57             el.style.transform="translate(150px,450px)"
58             el.style.transition='all  1s ease'
59 
60             //这里的 done，起始就是afterEnter 这个函数，也就是说：done是afterEnter函数的引用
61             done()
62           },
63           afterEnter(el){
64             //动画完成之后，会调用 afterEnter
65             // console.log('ok')
66             this.flag=!this.flag
67           }
68         }
69           });
70       </script>
71   </body>
72 </html>
posted on 2019-06-10 11:23 songsong_p_blue 阅读(297) 评论(0) 收藏举报
第五章 动画 45-47：动画-钩子函数实现小球半场动画

第五章动画 45-47：动画-钩子函数实现小球半场动画
