Vue-transition组件的Css动画+过渡（2）进阶，笔记总结 “建议收藏”

• in-out：新元素先进行过渡，完成之后当前元素过渡离开。

• out-in：当前元素先进行过渡，完成之后新元素过渡进入。

//写到mode里就行

这里还有多个组件的过渡 ，可以直接去看官网，例子跟我上班的大同小异，我在这里就不解读了

列表过渡

---

使用 v-for的这种场景中，使用 <transition-group> 组件

这个组件的几个特点：

• 不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 属性更换为其他元素。

• 过渡模式不可用，因为不再相互切换特有的元素。

• 内部元素总是需要提供唯一的 key 属性值。

• CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

{{ item }}

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。

使用v-move属性就可以做到，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置。

{{ item }}