vue3 transition用法详解

Transition 组件是一个非常强大且易于使用的特性，它允许我们在元素进入和离开 DOM 树时应用过渡效果。

一、CSS 过渡 class

对想要添加动画效果外层加上<transition>,<Transition> 组件传一个 name prop 来声明一个过渡效果名

<template>
  <button @click="show = !show">切换</button>
  <transition name="fade">
    <div class="box" v-if="show"></div>
  </transition>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const show = ref(true);
</script>
<style scoped lang="scss">
button {
  margin-bottom: 16px;
}
.box {
  width: 300px;
  height: 300px;
  background-color: skyblue;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s ease;
}
.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

<transition>组件会在适当的时候添加/删除以下类名：

• v-enter: 进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
• v-enter-active: 进入过渡的活动状态。在元素被插入时生效，在过渡/动画完成之后移除。这个类可以被用来定义过渡的持续时间、延迟和缓动函数。
• v-enter-to: 进入过渡的结束状态。在v-enter被删除后立即添加，在过渡/动画完成之后移除。
• v-move：对移动中的元素应用的过渡
• v-leave: 离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
• v-leave-active: 离开过渡的活动状态。在离开过渡被触发时生效，在过渡/动画完成之后移除。这个类可以被用来定义过渡的持续时间、延迟和缓动函数。
• v-leave-to: 离开过渡的结束状态。在v-leave被删除后立即添加，在过渡/动画完成之后移除。

二、自定义过渡 class

• enter-from-class: 进入过渡开始前的初始状态
• enter-active-class: 进入过渡进行中的状态
• enter-to-class: 进入过渡结束后的最终状态
• move-class：对移动中的元素应用的过渡
• leave-from-class: 离开过渡开始前的初始状态
• leave-active-class: 离开过渡进行中的状态
• leave-to-class: 离开过渡结束后的最终状态

我们可以通过在 Transition 组件上绑定这些类名来自定义过渡效果的样式

<template>
  <transition 
    enter-from-class="custom-enter-from"
    enter-active-class="custom-enter-active"
    enter-to-class="custom-enter-to"
    leave-from-class="custom-leave-from"
    leave-active-class="custom-leave-active"
    leave-to-class="custom-leave-to">
    <!-- ... -->
  </transition>
</template>

三、出现时过渡

如果你想在某个节点初次渲染时应用一个过渡效果，你可以添加 appear prop：

<template>
  <transition 
  	appear
    appear-from-class="custom-appear-from"
    appear-active-class="custom-appear-active"
    appear-to-class="custom-appear-to">
    <!-- ... -->
  </transition>
</template>

四、过渡事件

• before-enter: 在元素进入过渡之前触发
• enter: 在元素进入过渡时触发
• after-enter: 在元素进入过渡之后触发
• enter-cancelled: 如果进入过渡被取消，则在元素进入过渡之后立即触发
• before-leave: 在元素离开过渡之前触发
• leave: 在元素离开过渡时触发
• after-leave: 在元素离开过渡之后触发
• leave-cancelled: 如果离开过渡被取消，则在元素离开过渡之后立即触发

<template>
  <button @click="show = !show">切换</button>
  <transition
    name="fade"
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @enter-cancelled="enterCancelled"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    @leave-cancelled="leaveCancelled"
  >
    <div class="box" v-if="show"></div>
  </transition>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const show = ref(true);

const beforeEnter = (el) => {
  // 在进入过渡之前执行的逻辑
};
const enter = (el, done) => {
  // 在进入过渡时执行的逻辑
};
const afterEnter = (el) => {
  // 在进入过渡之后执行的逻辑
};
const enterCancelled = (el) => {
  // 如果进入过渡被取消，则在过渡结束后立即执行的逻辑
};
const beforeLeave = (el) => {
  // 在离开过渡之前执行的逻辑
};
const leave = (el, done) => {
  // 在离开过渡时执行的逻辑
};
const afterLeave = (el) => {
  // 在离开过渡之后执行的逻辑
};
const leaveCancelled = (el) => {
  // 如果离开过渡被取消，则在过渡结束后立即执行的逻辑
};
</script>
<style scoped lang="scss">
button {
  margin-bottom: 16px;
}
.box {
  width: 300px;
  height: 300px;
  background-color: skyblue;
}
</style>

五、总结

transition 是一个功能强大且灵活的特性，它可以帮助我们轻松地实现各种精美的过渡效果。下章我们会介绍 transition和animate.style结合使用，敬请期待！！！