Vue3中transition和transition-group使用

Vue的内置组件中有transition和transition-group两种组件，功能基本相同，主要是实现内容的动画效果。

transition是用来不同组件切换时的动画，最常见的用法如下：

<router-view v-slot="props">
    <!-- 过度动画 -->
    <transition name="fade" mode="out-in">
        <!-- 通过component来切换组件 -->
        <component :is="props.Component" />
    </transition>
</router-view>

<router-view> 暴露了一个名为Component的v-slot API，主要使用 <transition> 和 <keep-alive> 组件来包裹你的路由组件。

transition-group是用来多个组件的动画效果。

<el-breadcrumb>
    <transition-group name="breadcrumb" mode="out-in">
        <el-breadcrumb-item key="one" :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="item in menuList" :key="item">{{item}}</el-breadcrumb-item>
    </transition-group>
</el-breadcrumb>

比如我项目中使用到面包屑导航，其中的组件必须是由v-for生成的，而且必须加上key属性。

两者都有一个name属性，会自动寻常项目中 name开头的相对应的css。

enter-from、leave-from、appear、enter-to、leave-to、appear-to、enter-active、leave-active、appear-active

css3的动画，建议去学习一下相关知识，也不难的。

以第一个为例，主要是实现了透明度和平移的动画，对应的css如下：

<style lang="less" scoped>
	.fade-enter-active,
	.fade-leave-active {
		will-change: transform;
		transition: all 0.3s ease;
	}

	.fade-enter-from {
		opacity: 0;
		transform: translateX(-10px);
	}

	.fade-leave-to {
		opacity: 0;
		transform: translateX(10px);
	}
</style>

效果图如下：