vue-transition-group 使用示例
时间: 2024-09-23 14:03:18 浏览: 20
`vue-transition-group`是Vue.js的官方动画库,它提供了一组基础的CSS类用于实现元素的进出和切换动画。以下是使用`vue-transition-group`的一个简单示例:
首先,在你的Vue组件中安装`vue-transition-group`,如果还没有安装,可以在`main.js`或其他适当的地方添加:
```bash
npm install vue@next vue-transition-group
# 或者
yarn add vue@next vue-transition-group
```
接着,将`TransitionGroup`组件导入到你的组件文件中,并在需要动画的元素上使用`v-enter`, `v-enter-active`, `v-leave-to`, 等修饰符:
```html
<template>
<div id="app">
<transition-group tag="ul" name="list-animation">
<li v-for="(item, index) in items" :key="index">
{{ item }}
<button @click="removeItem(index)">Remove</button>
</li>
</transition-group>
</div>
</template>
<script>
import { transitionGroup } from 'vue-transition-group';
export default {
components: {
TransitionGroup,
},
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3'],
};
},
methods: {
removeItem(index) {
this.items.splice(index, 1);
},
},
};
</script>
<style scoped>
.list-animation-enter-active, .list-animation-leave-active {
transition: opacity 0.5s;
}
.list-animation-enter, .list-animation-leave-to {
opacity: 0;
}
</style>
```
在这个例子中,当点击删除按钮时,对应的列表项会淡入(enter)或淡出(leave),并且在删除过程中有一个过渡动画。你可以调整`.list-animation-enter-active` 和 `.list-animation-leave-active` 中的样式属性来自定义动画速度。