第五章动画 43：动画-使用过渡类名实现动画

 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     <!-- 2.自定义两组样式，来控制transition内部的元素实现动画 -->
12     <style>
13     /*v-enter 【这是一个时间点】是进入之前，元素的起始状态，此时还没有开始进入*/
14     /*v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素动画已经结束了*/
15       .v-enter,
16       .v-leave-to{
17         opacity: 0;
18         transform: translateX(150px);/*translateX()函数表示在二维平面上水平方向移动元素,等同于 translate(150px)*/
19       }
20       /*v-enter-active【入场动画的时间段】*/
21       /*v-leave-active 【离场动画的时间段】*/
22       .v-enter-active,
23       .v-leave-active{
24         transition: all 0.8s ease;/*所有属性都完成0.8s 由慢变快，然后慢速结束的效果*/
25       }
26     </style>
27   </head>
28 
29   <body>
30       <div id="app">
31       <input type="button" value="toggle"  @click="flag=!flag">
32      <!--  需求：点击按钮，让h3显示，再点击，让h3隐藏 -->
33       <!-- 1.使用transition元素，把需要被动画控制的元素，包裹起来 -->
34       <!-- transition元素，是Vue官方提供的 -->
35        <transition>
36          <h3 v-if="flag">这是一个H3</h3>
37        </transition>
38       </div>
39 
40 
41       <script>
42           //创建 Vue 实例，得到 ViewModel
43           var vm =  new Vue({
44               el:'#app',
45         data:{
46           flag:false
47         },
48         methods:{}
49           });
50       </script>
51   </body>
52 </html>

posted on 2019-06-10 11:20 songsong_p_blue 阅读(232) 评论(0) 收藏举报

第五章 动画 43：动画-使用过渡类名实现动画

第五章动画 43：动画-使用过渡类名实现动画