Vue，动画-使用过度类名实现动画（渐变）

Vue，动画-使用过度类名实现动画（渐变）

  

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <!-- p45 -->
 8     <script src="../js/vue.js"></script>
 9     <!-- 2. 自定义两组样式， 来控制 transition 内部的元素实现动画 -->
10     <style>
11         /* v-enter 这是一个时间点 是进入之前, 元素的起始状态, 此时还没有开始进入 */
12         /* v-leave-to 这是一个时间点  是动画离开之后, 离开的终止状态, 此时, 元素 动画已经结束了 */
13         .v-enter,
14         .v-leave-to{
15             /* 透明度为0 */
16         opacity: 0;      
17             /* 位移(x) */
18         transform: translateX(180px);
19         }
20         
21         /* v-enter-active [入场动画的时间段] */
22         /* v-leave-active [离场动画的时间段] */
23         .v-enter-active,
24         .v-leave-active{
25             /* 渐变 */
26             transition: all 1s ease;
27         }
28     </style>
29     <body>
30         <div id="app">
31             <input type="button" value="toggle" @click="flag=!flag">
32             <!-- 需求: 点击按钮， 让 h3 显示， 再点击， 让 h3 隐藏 -->
33             <!-- 使用 transition 元素， 把 需要被动画控制的元素， 包裹起来 -->
34             <!-- transition 元素， 是 Vue 官方提供的 -->
35             <transition>
36                 <h3 v-if="flag">这是一个h3</h3>
37             </transition>
38     
39         </div>
40         
41     </body>
42 </html>
43 <script>
44     var vm = new Vue({
45         el:'#app',
46         data:{
47             flag: false
48         },
49         methods:{
50             
51         }
52     })
53 </script>

效果图

官方文档

posted on 2019-06-26 16:46  我1我1我1  阅读(1280)  评论(0)    收藏  举报

导航