transition-group用法
transition-group 是 Vue 提供的一个组件,用于在 Vue 实例中创建动画效果。transition-group 可以在元素被添加或删除时,添加过渡效果。
使用 transition-group 的步骤如下:
1. 导入 transition-group 组件:
```。
import { transition-group } from 'vue';。
```。
2. 在 Vue 实例中定义 transition-group:
```。
<transition-group name="fade">。
<div v-for="(item, index) in list" :key="index">。
{{ item }}。
</div>。
</transition-group>。
```。
transition-group 组件需要一个 name 属性来标识动画效果的名称。在这个例子中,我们使用了名为 fade 的动画效果。
3.在CSS中定义过渡效果:
```。
.fade-enter-active, .fade-leave-active 。
transition: opacity .5s;。
}。
.fade-enter, .fade-leave-to 。
opacity: 0;。transition用法搭配
}。
```。
这个例子中,我们使用了 opacity 属性来定义过渡效果。在 fade-enter-active 和 fade-leave-active 类中定义过渡时间,而在 fade-enter 和 fade-leave-to 类中定义元素的初始状态和结束状态。
这里假设 transition-group 的子元素是 div,如果子元素类型不是 div 需要修改 CSS 选择器。
以上是 transition-group 的基本使用方式。在实际应用中,我们还可以使用 transition-group 的其他属性,比如 tag、appear、css 等,来满足不同的需求。