可以通过 appear 属性 设置节点在初始渲染的过渡，默认和进入/离开过渡一样，同样也可以自定义 CSS 类名和自定义 JavaScript 钩子；
多个组件的过渡
当有相同标签名的元素切换时，推荐通过 key 属性 设置唯一的值来标记，否则 Vue 为了效率只会替换相同标签内部的内容
两个元素互相切换可以这样设置
<transition> <button v-bind:key="isEditing"> {{ isEditing ? '内容' : '内容不存在' }} </button> </transition>
过渡模式
in-out：新元素先进行过渡，完成之后当前元素过渡离开。out-in：当前元素先进行过渡，完成之后新元素过渡进入。
1.<transition name="fade" mode="out-in"> //写到mode里就行 <!-- 内容 --> </transition>
这里还有多个组件的过渡 ，可以直接去看官网，例子跟我上班的大同小异，我在这里就不解读了
列表过渡
使用 v-for的这种场景中，使用 <transition-group> 组件
这个组件的几个特点：
不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 属性更换为其他元素。
过渡模式不可用，因为不再相互切换特有的元素。
内部元素总是需要提供唯一的 key 属性值。
CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
<transition-group name="list" tag="p"> <span v-for="item in items" v-bind:key="item" class="list-item"> {{ item }} </span> </transition-group>
<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。
使用v-move属性就可以做到，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置。
1. <transition-group name="list" tag="p"> <span v-for="item in items" v-bind:key="item" class="list-item"> {{ item }} </span> </transition-group> <style> .list-move { transition: transform 1s; } </style>
这样就可以在列表改变顺序的时候看到过渡了
注意：使用 FLIP（v-move） 过渡的元素不能设置为 display: inline 。可以设置为 display: inline-block 或者放置于 flex 中
如果想复用过渡效果，创建一个可复用过渡组件将<transition> 或者 <transition-group> 作为根组件，然后将任何子组件放置在其中就可以了。
