vue3 transitiongroup的使用
时间: 2023-06-21 16:07:38 浏览: 107
Vue运用transition实现过渡动画
Vue3的`<transition-group>`组件可以让我们在多个元素之间添加过渡动画。它与Vue2的`<transition-group>`使用方式类似,不过在Vue3中使用需要注意一些细节。
下面是一个简单的例子,展示了如何使用`<transition-group>`:
```html
<template>
<div>
<button @click="addItem">Add Item</button>
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</transition-group>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const items = ref([{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]);
const addItem = () => {
const id = items.value.length + 1;
items.value.push({ id, name: `Item ${id}` });
};
return {
items,
addItem,
};
},
};
</script>
<style>
.list-enter-active,
.list-leave-active {
transition: all 0.5s;
}
.list-enter,
.list-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>
```
在上面的例子中,我们使用了`<transition-group>`包裹了一个`<ul>`元素,然后使用`v-for`指令渲染了多个`<li>`元素。注意到每个`<li>`元素都有一个`key`属性,用来帮助Vue3识别哪些元素是已经存在的,哪些元素是新添加的或者被删除的。
我们还定义了一些CSS样式来定义动画效果。`.list-enter-active`和`.list-leave-active`样式分别用于在元素插入和删除时添加过渡效果,`.list-enter`和`.list-leave-to`样式则定义了具体的过渡效果。在这个例子中,我们定义了一个简单的淡入淡出和垂直平移的效果。
如果你想了解更多关于Vue3的`<transition-group>`组件的使用,请参考官方文档:[Transitions & Animations - Transitioning Between Elements](https://v3.vuejs.org/guide/transitions-overview.html#transitioning-between-elements)。
阅读全文