<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。

被transition标签包裹的元素在其显示隐藏时,六个不同的阶段会自动添加6个class名

元素进入的第一帧 [transition name 属性]-enter
元素进入中 [transition name 属性]-enter-active
元素进入的最后一帧 [transition name 属性]-enter-to
元素离开的第一帧 [transition name 属性]-leave
元素离开中 [transition name 属性]-leave-active
元素离开的最后一帧 [transition name 属性]-leave-to

这里我们用一个demo来实现一些基本的使用，我们这里就不使用单文件来演示了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<body>
  <!--引入Vue三方库--> 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!--创建一个DOM元素-->
  <div id="app">
  

    <transition name="fade">
      <div class="box" v-if="show"></div>
    </transition>


    <button @click="show = !show">show/hidden</button>
  </div>

  <script>
    // 实例化一个Vue对象
    // Vue 构造函数接收配置对象
    new Vue({
      el: '#app', // el 指定页面中DOM元素,Vue就会以这个DOM为挂载对象
      data: {
        show: true,
        todos: [{
          id: 1,
          text: 'todos'
        }]
      }
    })
  </script>
</body>

从上面可以看到，transition定义了name为fade，所以我们之后写的类名就一fade开头。

下面是官方的解释：

name - string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 "v"

更多详情请点击前往官网查看transition

接下来，我们进行书写动画的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}

.fade-enter,
.fade-leave-to {
  /*元素进入动画第一帧 类名*/
  opacity: 0;
  transform: translateX(300px);
  width: 0;
  height: 0;
}

.fade-enter-active,
.fade-leave-active {
  /*元素进入整个过程中 类名*/
  transition: all .5s linear;
}

.fade-enter-to,
.fade-leave {
  /*元素进入动画最后一帧 类名*/ 
  opacity: 1;
  transform: translateX(0);
  width: 100px;
  height: 100px;
}