第六章组件 61 动画-小球动画flag标识符的作用分析

 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         background-color: red;
16         border-radius: 50%;
17       }
18     </style>
19   </head>
20 
21   <body>
22       <div id="app">
23       <input type="button" value="接入购物车"  @click="flag=!flag">
24       
25       <transition
26       @before-enter="beforeEnter"
27       @enter="enter"
28       @after-enter="afterEnter">
29         <div class="ball" v-show="flag"></div>
30       </transition>
31       </div>
32 
33       <script>
34           //创建 Vue 实例，得到 ViewModel
35           var vm =  new Vue({
36               el:'#app',
37         data:{
38          flag:false
39         },
40         methods:{
41           beforeEnter(el){
42             el.style.transform='translate(0,0)'
43           },
44           enter(el,done){
45             el.offsetWidth
46             el.style.transform='translate(150px,450px)'
47             el.style.transition="all 1s ease"
48             done()
49           },
50           afterEnter(el){
51             //这句话，第一个功能，是控制小球的显示与隐藏
52             //第二个功能：直接跳过后半场动画，让flag标识符直接变为 false
53             //当第二次再点击 按钮的时候，flag false ->true
54             this.flag=!this.flag
55             // el.style.opacity=0.5
56 
57             //Vue 把一个完整的动画，使用钩子函数，拆分为了两部分；
58             //我们使用 flag 标识符，来表示动画的切换；
59             //刚开始，flag= false ->true ->false
60           }
61         }
62           });
63       </script>
64   </body>
65 </html>
第六章 组件 61 动画-小球动画flag标识符的作用分析

第六章组件 61 动画-小球动画flag标识符的作用分析
