vue3 transition 实现动画淡入淡出效果

Vue3中，内置了一些组件，其中之一是<transition>组件。<transition>组件用于在元素插入或删除时，为其添加过渡效果

基本使用

<transition name="fade" mode="out-in">
  <div v-if="show" key="1">内容淡入淡出</div>
</transition>

• 经典案例一（菜单切换）

<button @click="show = !show">菜单切换</button>
<transition name="slide" mode="out-in">
	<div v-if="show" key="1">菜单一</div>
	<div v-else key="2">菜单二</div>
</transition>

CSS样式

.slide-enter-active,
.slide-leave-active {
	transition: opacity 0.3s;
}
.slide-enter-from,
.slide-leave-to {
	opacity: 0;
}

这样就实现了一个淡入淡出效果，是不是非常非常的简单。是不是有点难以相信，事实就是如此。

我们升级一下需求，如果需要菜单是向上翻滚，类似模方效果了，如果实现了

<button @click="show = !show">Toggle</button>
<transition name="cube" mode="out-in">
	<div v-if="show" class="cube-face" key="1">1</div>
	<div v-else class="cube-face" key="2">2</div>
</transition>

CSS样式

.cube-face {
	width: 100px;
	height: 100px;
	background-color: #42b983;
	position: absolute;
	transition: transform 1s ease;
}

.cube-enter-active,
.cube-leave-active {
	transition: all 1s ease;
}

.cube-enter-from,
.cube-leave-to {
	transform: translateY(100px) rotateX(-90deg);
	opacity: 0;
}

.cube-enter-to,
.cube-leave-from {
	transform: translateY(0) rotateX(0deg);
	opacity: 1;
}

其实就是样式有点区别，利用 transition 内置组件和css动画可以做很多完美的特效，真是不要太简单了。

使用注意项

在使用 Vue 3 中的内置组件 transition 时，有一些需要注意的地方：

导入 transition 组件：在 Vue 3 中，transition 组件已经被重命名为 Transition，所以在导入时需要使用 import { Transition } from ‘vue’。

使用 Transition 组件：在 Vue 3 中，Transition 组件的使用方式与 Vue 2 有一些不同。首先，Transition 组件的标签名已经改为 …，而不再是 …。此外，Transition 组件的属性也有一些改变，例如 name 属性改为 name 或 appear、appear-from-class、appear-to-class 等属性改为 appear、enter-from-class、enter-to-class 等属性。

使用不同的过渡类名：在 Vue 3 中，过渡类名的生成方式也有所改变。以前，Vue 2 默认使用 v- 前缀加上过渡类型名称作为类名，例如 v-enter、v-leave-to 等。而在 Vue 3 中，使用了更加直观的类名，例如 enter-active、leave-active 等。这意味着在使用自定义过渡类名时，需要根据 Vue 3 的类名规则进行相应的修改。

使用 v-if 和 v-show：在 Vue 3 中，transition 组件不再支持与 v-if 和 v-show 一起使用。如果需要在组件动态切换时实现过渡效果，可以考虑使用 transition 组件的 appear 属性或 Transition 组件的 v-if 和 v-else。

使用 JSX：如果在 Vue 3 中使用 JSX 的方式来写模板代码，需要注意 Transition 组件的使用方式与普通模板的略有不同。在 JSX 中，需要使用 v-slots 来定义过渡的内容，并且 Transition 组件需要使用闭合标签 。