transitionGroup
时间: 2024-05-10 08:14:41 浏览: 134
Transition
`<transition-group>` 是一个 Vue 组件,用于在元素列表在添加或删除时设置过渡效果。它可以包含多个元素,当有元素被添加或删除时,会触发过渡效果。常见的应用场景包括列表中的元素添加、删除、排序等操作时的动画效果。
`<transition-group>` 组件需要和 `<transition>` 或 `<animated>` 组件配合使用,来定义过渡的效果。在使用时,需要通过 `key` 属性来标记每个元素,以便 Vue 能够正确识别每个元素,并在过渡时应用相应的动画效果。
例如,以下代码展示了如何使用 `<transition-group>` 来实现一个列表的添加和删除时的过渡效果:
```html
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</transition-group>
```
在上面的代码中,`<transition-group>` 组件的 `name` 属性指定了过渡效果的名称,`tag` 属性指定了包裹元素的标签名,`v-for` 指令用于循环渲染列表中的元素,`key` 属性用于标记每个元素。
同时,还需要在 CSS 中定义过渡效果的样式:
```css
.list-enter-active,
.list-leave-active {
transition: all 0.5s;
}
.list-enter,
.list-leave-to {
opacity: 0;
transform: translateY(30px);
}
```
在上面的代码中,`.list-enter-active` 和 `.list-leave-active` 类用于定义过渡时的动画效果,`.list-enter` 和 `.list-leave-to` 类用于定义进入和离开时的初始和最终状态。这里定义了一个简单的动画效果,当元素进入时从下方滑入,离开时则向上方滑出。
阅读全文