Vue中的列表过渡

发布网友发布时间：2022-10-02 05:12

我来回答

共1个回答

热心网友时间：2023-10-25 02:08

不管是组件切换还是单个元素的切换， <transition> 标签内部在一个时间都是只有一个元素或者一个组件。

下面我们来看一下列表过渡

在vue的官方文档中指出：

过渡模式指的是 mode='in-out'/'out-in' 命令，可以指定离开过渡动画和进入动画的先后顺序。

对于list来说，除了插入元素enter和移除元素leave会产生动画效果，还提供了一个动画效果：即在元素的position发生改变时，为元素加上 v-move class标签。利用这个原理，我们可以这样写：

在vue的官方教程中，还有这样的一个栗子：

为所有的元素都加上了 list-item class标签，并加上 transition rule，这样当列表元素的任何一个css样式发生变化的时候（enter，leave，move），都会产生过渡效果。
我们在 list-complete-leave-active 的css规则中，我们把要移除的元素脱离了文档流，否则，要移除的元素在移除过渡中一直处于文档流中，影响了后面元素的move过渡效果。
这样的话，当我们插入或移除一个元素，影响其他元素的位置的时候，由于vue存在move transition这一机制，元素会平滑过渡到它们新的位置上。

元素的交错过渡是怎么实现的呢？我们可以通过元素 data- 前缀的attribute，来设置不同delay的callback函数。
官方文档中给了一个很有意思的栗子：

li 元素绑定的 :data-index=index 描述了 li 在列表中的位置，所以在列表中越靠前的 li 元素，过渡效果对应的回调函数执行得越早。