v-for 怎么加transition
时间: 2023-11-13 17:44:39 浏览: 43
要给 v-for 添加 transition 效果,你需要在每个被循环的元素外部包裹一个 `<transition>` 标签,并将 `name` 属性设置为你想要使用的动画名称。例如:
```html
<template>
<ul>
<transition-group name="fade">
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</transition-group>
</ul>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
```
在上面的示例中,我们使用了 `<transition-group>` 标签来包裹被循环的 `<li>` 元素。我们将 `name` 属性设置为 `"fade"`,这意味着我们要在 CSS 中定义名为 `.fade-enter-active`、`.fade-leave-active`、`.fade-enter` 和 `.fade-leave-to` 的动画类名。
在 CSS 中,我们定义了一个淡入淡出的动画,当元素进入或离开时,将透明度从 0 到 1(或从 1 到 0)进行过渡。这将创建一个平滑的淡入淡出效果。
请注意,我们还使用了 `:key` 属性来标识每个被循环的元素。这是必需的,因为它允许 Vue 跟踪每个元素的状态,并在元素改变时进行适当的动画过渡。