基本使用

使用方法：

transition的name属性，命名为fade，此时对应的过渡类为：

fade-enter-from
fade-leave-to
fade-enter-active
fade-leave-active
fade-enter-to
fade-leave-from，其中：fade-enter-to、fade-leave-from的样式一般不写，与原组件样式保持一致即可；过渡状态写在fade-enter-active、fade-leave-active两个类中。

示例：

<template>
  <el-button type="primary" size="small" @click='handleClick'>显示/隐藏</el-button>
  <transition name="fade">
    <Test v-if='show'></Test>
  </transition>
</template>

<style lang="scss" scoped>
.fade-enter-from,
.fade-leave-to {
  width: 0;
  height: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 1s ease;
}
.fade-enter-to,
.fade-leave-from {

}
</style>

使用自定义class

使用方法：

除了给transition组件的name属性赋值，来使用固定的6个类名以外，还可以使用自定义类名，即：使用transition组件的以下属性

enter-from-class - string：对应 fade-enter-from
leave-to-class - string：对应 fade-leave-to
leave-from-class - string：对应 fade-leave-from
enter-to-class - string：对应 fade-enter-to
enter-active-class - string：对应 fade-enter-active
leave-active-class - string：对应 fade-leave-active
appear-class - string：页面加载完，起始时的样式
appear-active-class - string：起始动画的过程中的样式
appear-to-class - string：起始动画的终点的样式

示例

效果同name='fade'一致

<template>
  <el-button type="primary" size="small" @click="handleClick">显示/隐藏</el-button>
  <transition
    enter-to-class="to"
    leave-from-class="to"
    enter-from-class="from"
    leave-to-class="from"
    enter-active-class="active"
    leave-active-class="active"
  >
    <Test v-if="show"></Test>
  </transition>
</template>

<style lang="scss" scoped>
.from {
  width: 0;
  height: 0;
}
.active {
  transition: all 1s ease;
}
.to {

}
</style>

优势

我们可以通过这种方式来结合第三方的类库进行过渡，如Animate.css；

这里只绑定了进入和离开两个过程的动画

<template>
  <el-button type="primary" size="small" @click="handleClick">显示/隐藏</el-button>
  <transition
    enter-active-class="animate__animated animate__bounce"
    leave-active-class="animate__animated animate__wobble"
  >
    <Test v-if="show"></Test>
  </transition>
</template>

生命周期

transition组件共有8个生命周期，在过渡的不同阶段调用

before-enter：过渡开始之前调用，对应的回调函数有el: Element一个参数
enter：过渡中调用，对应的回调函数有el: Element, done: Funciton两个参数
after-enter：过渡之后调用，对应的回调函数有el: Element一个参数
enter-cancelled：进入被中断时调用，对应的回调函数有el: Element一个参数
before-leave：离开前调用，对应的回调函数有el: Element一个参数
leave：离开的过程中调用，对应的回调函数有el: Element, done: Function两个参数
after-leave：离开之后调用，对应的回调函数有el: Element一个参数
leave-cancelled(仅 v-show)：离开被中断时调用，对应的回调函数有el: Element一个参数
appear
after-appear
appear-cancelled

示例

<script setup lang="ts">
import { ref } from 'vue'
import gsap from 'gsap'
import Test from './Test.vue'

const beforeEnter = (el: Element) => {
  gsap.set(el, {
    width: 0,
    height: 0,
  })
}
const enter = (el: Element, done: gsap.Callback) => {
  gsap.to(el, {
    width: 200,
    height: 200,
    onComplete: done,
  })
}
const leave = (el: Element, done: gsap.Callback) => {
  gsap.to(el, {
    width: 0,
    height: 0,
    onComplete: done,
  })
}

const show = ref<boolean>(true)
const handleClick = () => {
  show.value = !show.value
}
</script>

<template>
  <el-button size="small" type="primary" @click="handleClick">显隐</el-button>
  <transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
    <Test v-if="show"></Test>
  </transition>
</template>

其他属性

duration - number | { enter: number, leave: number }：指定过渡的持续时间，如果过渡时间长于动画时间，则动画结束后，直到过渡结束后才到下一步；可以直接设置:duration='500'或者分开设置:duration={enter: 500, leave: 500}
appear - boolean：一进入页面时执行的动画，默认false，
name - string 用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。
persisted - boolean。如果是 true，表示这是一个不真实插入/删除元素的转换，而是切换显示/隐藏状态。过渡钩子被注入，但渲染器将跳过。相反，自定义指令可以通过调用注入的钩子 (例如 v-show) 来控制转换。
css - boolean。是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
type - string。指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
mode - string 控制离开/进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。

官网：vue transition

transition组件

基本使用

使用方法：

示例：

使用自定义class

使用方法：

示例

优势

生命周期

示例

其他属性