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>