vue3【详解】内置组件 Transition

用于给元素或组件进入和离开页面添加过渡动画

使用场景

v-if 切换

<button @click="show = !show">Toggle</button>
<Transition><p v-if="show">hello</p>
</Transition>

v-show 切换

动态组件切换

<Transition name="fade" mode="out-in"><component :is="activeComponent"></component>
</Transition>

改变 key

<script setup>
import { ref } from 'vue';
const count = ref(0);setInterval(() => count.value++, 1000);
</script><template><Transition><span :key="count">{{ count }}</span></Transition>
</template>

默认的过渡动画

.v-enter-active,
.v-leave-active {transition: opacity 0.5s ease;
}.v-enter-from,
.v-leave-to {opacity: 0;
}

此默认 CSS 描述了以下 6 种状态的样式

在这里插入图片描述

v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

设置初次渲染时过渡 appear

添加 appear 属性即可。

<Transition appear>...
</Transition>

设置过渡动画时长 duration

<Transition :duration="550">...</Transition>

可以用对象的形式传入，分开指定进入和离开所需的时间：

<Transition :duration="{ enter: 500, leave: 800 }">...</Transition>

设置过渡模式 mode

<Transition mode="out-in">...
</Transition>

mode 属性的值有：

out-in 先执行离开动画，然后在其完成之后再执行元素的进入动画。
in-out （不常用）先执行进入动画，然后在其完成之后再执行元素的离开动画。

自定义过渡动画名称 name

添加属性 name，可自定义过渡动画名称，代替默认的 v

<Transition name="fade">...
</Transition>

此时需自行添加以下 css

.fade-enter-active,
.fade-leave-active {transition: opacity 0.5s ease;
}.fade-enter-from,
.fade-leave-to {opacity: 0;
}

对内嵌元素添加过渡

<Transition name="nested"><div v-if="show" class="outer"><div class="inner">Hello</div></div>
</Transition>

/* 应用于嵌套元素的规则 */
.nested-enter-active .inner,
.nested-leave-active .inner {transition: all 0.3s ease-in-out;
}.nested-enter-from .inner,
.nested-leave-to .inner {transform: translateX(30px);opacity: 0;
}/* ... 省略了其他必要的 CSS */

自定义过渡动画类名

添加属性 enter-active-class， leave-active-class ，可自定义过渡动画类名（方便使用第三方的动画库，如 Animate.css）

<!-- 假设你已经在页面中引入了 Animate.css -->
<Transitionenter-active-class="animate__animated animate__tada"leave-active-class="animate__animated animate__bounceOutRight"
><p v-if="show">hello</p>
</Transition>

改用 JS 实现过渡动画

添加属性 :css="false"
添加相关事件的钩子函数

相关的 JS 动画库有

gsap
motion
animejs

<Transition@before-enter="onBeforeEnter"@enter="onEnter"@after-enter="onAfterEnter"@enter-cancelled="onEnterCancelled"@before-leave="onBeforeLeave"@leave="onLeave"@after-leave="onAfterLeave"@leave-cancelled="onLeaveCancelled"
><!-- ... -->
</Transition>

// 在元素被插入到 DOM 之前被调用
// 用这个来设置元素的 "enter-from" 状态
function onBeforeEnter(el) {}// 在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
function onEnter(el, done) {// 调用回调函数 done 表示过渡结束// 如果与 CSS 结合使用，则这个回调是可选参数done()
}// 当进入过渡完成时调用。
function onAfterEnter(el) {}// 当进入过渡在完成之前被取消时调用
function onEnterCancelled(el) {}// 在 leave 钩子之前调用
// 大多数时候，你应该只会用到 leave 钩子
function onBeforeLeave(el) {}// 在离开过渡开始时调用
// 用这个来开始离开动画
function onLeave(el, done) {// 调用回调函数 done 表示过渡结束// 如果与 CSS 结合使用，则这个回调是可选参数done()
}// 在离开过渡完成、
// 且元素已从 DOM 中移除时调用
function onAfterLeave(el) {}// 仅在 v-show 过渡中可用
function onLeaveCancelled(el) {}