vue中使用transition-group来动画过渡li之间的切换
时间: 2024-05-05 19:21:43 浏览: 18
使用 `transition-group` 来实现 `li` 之间的过渡动画,需要注意以下几点:
1. 在 `ul` 标签上添加 `transition-group` 属性,并设置 `tag` 属性为 `li`,表示将 `li` 元素作为过渡的目标;
2. 在 `li` 元素上添加 `key` 属性,用于区分不同的元素;
3. 在 CSS 样式中设置过渡效果。
下面是一个简单的示例代码:
```html
<template>
<ul v-if="items.length" class="list" v-bind:key="items.length" v-transition-group="'list'">
<li v-for="(item, index) in items" v-bind:key="item.id" class="list-item">{{ item.text }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'item 1' },
{ id: 2, text: 'item 2' },
{ id: 3, text: 'item 3' },
],
};
},
};
</script>
<style>
.list-enter-active,
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter,
.list-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>
```
在上面的代码中,`transition-group` 属性绑定了一个字符串 `'list'`,该字符串用于设置 CSS 类名前缀,以便 Vue 自动为过渡效果添加相关的类名,例如 `.list-enter-active`、`.list-leave-active`、`.list-enter` 和 `.list-leave-to` 等类名。
CSS 样式中设置了过渡效果,`.list-enter-active` 和 `.list-leave-active` 表示过渡过程中的样式,`.list-enter` 和 `.list-leave-to` 表示进入和离开的样式,将它们应用到 `opacity` 和 `transform` 属性上,实现了渐变和位移的过渡效果。