Vue3过渡动画的详解

在 Vue3 中，过渡动画的实现更加简单易用，本文将从以下几个方面介绍Vue3的过渡动画：

过渡类名
过渡模式
自定义过渡函数
示例程序

过渡类名

在 Vue3 中，过渡类名的命名规则和 Vue2 一样。当元素被插入、更新或删除时，你可以在元素上添加不同的 class 名称来指定不同的状态。

Vue3 中的过渡类名和 Vue2 中的类名一样，分别包括以下几个：

类名	说明
v-enter	进入的起点状态，注意该类名只会在元素插入时生效
v-enter-active	进入的终点状态，表示元素完成过渡，在动画时间段内需要维持
v-enter-to	Vue3新增，进入的终点状态，事实上和v-enter-active表现相同；在动画结束后会被删除
v-leave	需删除的状态，只在使用 `<transition>` 组件时，组件从 DOM 中移除时生效
v-leave-active	需删除的状态，只在使用 `<transition>` 组件时，组件从 DOM 中移除时生效
v-leave-to	Vue3 新增，需要删除的状态，只有在定义不同的 v-leave 和 v-leave-to 类名时使用；在动画结束后会被删除
v-move	在列表渲染中使用，需要移动的元素的起始状态
v-move-active	在列表渲染中使用，需要移动的元素的终止状态，表示移动完成，在动画时间段内需要维持

在定义转换动画时，我们需要添加这些不同的 class 名称，以指定不同的状态。通常情况下，我们会搭配 CSS3 实现不同状态到另一种状态的变换。

下面是一个简单的例子，展示 <transition> 组件如何在 Vue3 中使用：

<template>
  <div>
    <button @click="show = !show">toggle</button>
    <transition name="fade" @before-enter="beforeEnter" @after-enter="afterEnter">
      <div v-if="show" key="msg">hello</div>
    </transition>
  </div>
</template>

<script>
import {ref} from 'vue'

export default {
  setup () {
    const show = ref(false)
    const beforeEnter = function (el) {
      el.style.opacity = 0
    }
    const afterEnter = function (el) {
      el.style.opacity = 1
    }
    return {
      show,
      beforeEnter,
      afterEnter
    }
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity:0;
}
</style>

上面的代码中，我们实现了一个基本的渐变过渡动画。在其中设置 beforeEnter 和 afterEnter 两个生命周期函数回调，对元素样式进行控制。

过渡模式

Vue3 中提供了不同的过渡模式，包括 in-out、out-in 或者同时触发。在 Vue3 中，通过设置 mode 来实现不同的过渡模式。默认模式为同时触发。

下面是三种不同过渡模式的示例：

in-out

在 in-out 模式中，新元素被插入到旧元素之后，并且新元素过渡完成后，旧元素被删除。

<template>
  <transition name="fade" mode="in-out">
    <button @click="show = !show" key="toggle">toggle</button>
    <div v-if="show" key="msg">hello</div>
  </transition>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity:0;
}
</style>

out-in

在 out-in 模式中，旧元素先过渡完成后，新元素被插入到 DOM 中。

<template>
  <transition name="fade" mode="out-in">
    <button @click="show = !show" key="toggle">toggle</button>
    <div v-if="show" key="msg">hello</div>
  </transition>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity:0;
}
</style>

同时触发

在同时触发模式中，新元素和旧元素同时存在，直到新元素过渡完成。

<template>
  <transition name="fade">
    <button @click="show = !show" key="toggle">toggle</button>
    <div v-if="show" key="msg">hello</div>
  </transition>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to{
  opacity:0;
}
</style>

自定义过渡函数

有时候，你可能希望使用自定义的过渡函数或者钩子函数，以满足一些应用特殊的过渡效果需求。在 Vue3 中，解决这个问题十分简单。

在 Vue3 中，可以在 <transition> 组件上增加属性 css 和 type。css 属性用于指定渐变效果使用的过渡函数，type 属性用于指定过渡函数的类型。

示例代码如下：

<template>
  <transition name="fade" :css="false" :type="{beforeEnter: beforeEnter}">
    <button @click="show = !show" key="toggle">toggle</button>
    <div v-if="show" key="msg">hello</div>
  </transition>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    const show = ref(false)
    const beforeEnter = function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'center'
      el.style.transform = 'scale(.1)'
    }
    return {
      show,
      beforeEnter,
    }
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s, transform 1s cubic-bezier(.75,-0.48,.26,1.52);
}
.fade-enter, .fade-leave-to{
  opacity:0;
}
</style>

在上面的代码中，我们通过设置 :css="false" 属性阻止 Vue3 使用默认的 transition 样式。然后，通过添加 type 属性和自定义的钩子函数来实现了 beforeEnter 的自定义过渡函数。

示例程序

参考Vue2的官方示例，这里提供了一个简单的Vue3过渡动画示例代码，包含了过渡类名、模式以及自定义过渡函数的使用。

<template>
  <div id="demo">
    <button v-on:click="toggle">Toggle</button>
    <transition :name="transitionName" :mode="transitionMode" :duration="{ appear: 5000, enter: 5000, leave: 5000 }" @before-enter="beforeEnter" @after-enter="afterEnter">
      <div v-if="show">
        Demo!
      </div>
    </transition>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'hello',

  setup: function () {
    const show = ref(true)
    const transitionName = ref('')
    const transitionMode = ref('')

    const beforeEnter = function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'center'
    }

    const afterEnter = function (el) {
      el.style.opacity = 1
    }

    const toggle = function () {
      show.value = !show.value
      transitionName.value = 'fade'
      transitionMode.value = 'out-in'
      if (show.value) {
        beforeEnter(document.getElementById('demo').children[1])
      }
    }
    return {
      show,
      toggle,
      transitionName,
      transitionMode,
      beforeEnter,
      afterEnter
    }
  }
}
</script>

<style scoped>
.fade-enter-active {
  transition: all .5s ease;
}

.fade-enter,
.fade-leave-to {
  transform: translateX(100%);
  opacity:0;
}
</style>