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>
效果图
官方文档
