Vue，动画-修改v-前缀
将transition取个 name 的名字，然后把v改成 name 的名字
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 29 .my-enter, 30 .my-leave-to{ 31 opacity: 0; 32 /* 位移(x) */ 33 transform: translateX(80px); 34 } 35 36 .my-enter-active, 37 .my-leave-active{ 38 transition: all 4s ease; 39 } 40 </style> 41 <body> 42 <div id="app"> 43 <input type="button" value="toggle" @click="flag=!flag"> 44 <!-- 需求: 点击按钮， 让 h3 显示， 再点击， 让 h3 隐藏 --> 45 <!-- 使用 transition 元素， 把 需要被动画控制的元素， 包裹起来 --> 46 <!-- transition 元素， 是 Vue 官方提供的 --> 47 <transition> 48 <h3 v-if="flag">这是一个h3</h3> 49 </transition> 50 51 <hr> 52 53 <input type="button" value="toggle" @click="flag2=!flag2"> 54 <transition name="my"> 55 <h6 v-if="flag2">这是一个h6</h6> 56 </transition> 57 58 </div> 59 60 </body> 61 </html> 62 <script> 63 var vm = new Vue({ 64 el:'#app', 65 data:{ 66 flag: false, 67 flag2: false 68 }, 69 methods:{ 70 71 } 72 }) 73 </script>
官方文档
