transition-group fadeUpIn 效果
时间: 2025-06-17 17:27:31 浏览: 10
在Vue.js中,`<transition-group>`可以用来为多个元素或组件定义进入和离开的动画效果。要实现一个`fadeUpIn`效果(即淡入并从下往上移动的效果),可以通过自定义CSS类名来完成。
以下是一个使用`<transition-group>`实现`fadeUpIn`效果的示例:
### 示例代码
```vue
<template>
<div>
<button @click="add">Add</button>
<button @click="remove">Remove</button>
<transition-group name="fade-up-in" tag="ul">
<li v-for="(item, index) in items" :key="item.id">
{{ item.name }}
</li>
</transition-group>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
nextId: 4
};
},
methods: {
add() {
this.items.push({ id: this.nextId++, name: `Item ${this.nextId - 1}` });
},
remove() {
this.items.pop();
}
}
};
</script>
<style>
/* 定义fade-up-in的进入和离开效果 */
.fade-up-in-enter-active, .fade-up-in-leave-active {
transition: all 0.5s ease;
}
.fade-up-in-enter-from, .fade-up-in-leave-to {
opacity: 0;
transform: translateY(30px); /* 从下方30px的位置开始 */
}
</style>
```
### 解释
1. **模板部分**:
- `<button>`:两个按钮分别用于添加和移除列表项。
- `<transition-group>`:包裹需要添加过渡效果的列表,并设置`name="fade-up-in"`属性。`tag="ul"`指定了渲染的根标签为`<ul>`。
- `<li>`:通过`v-for`指令遍历`items`数组生成列表项,每个项都有唯一的`key`值。
2. **脚本部分**:
- `data()`:返回一个对象,其中包含`items`数组和`nextId`变量,初始时`items`包含三个元素。
- `methods`:定义了`add`和`remove`方法,分别用于向列表中添加新项和移除最后一项。
3. **样式部分**:
- `.fade-up-in-enter-active, .fade-up-in-leave-active`:定义进入和离开时的过渡效果,这里设置了0.5秒的所有属性变化动画。
- `.fade-up-in-enter-from, .fade-up-in-leave-to`:定义初始状态和结束状态的透明度和位移。`opacity: 0`表示完全透明,`transform: translateY(30px)`表示从下方30px的位置开始。
当点击“Add”按钮时,新项会从下方滑入并淡入;点击“Remove”按钮时,最后一项会淡出并向下滑出。
###
阅读全文
相关推荐

















