Veu进阶--transition动画和animation动画的使用详解

女爷i 2024-04-03 14:19 86阅读 0赞

### 一、概述 ###

在开发中，给一个组件的显示和消失添加某种过渡动画，可以很好的提升用户体验。

在没有动画的情况下，整个内容的显示和隐藏会非常的生硬。

因此`Vue`中提供一些内置组件和对应的`API`来完成动画，利用它们我们可以方便的实现过渡动画效果.

### 二、Vue的transition动画 ###

**`Vue` 提供了`transition` 的封装组件，为**单个**元素或组件提供动画过渡效果**。

**transition的属性列表：**

interface TransitionProps {
        
      /**
       * 用于自动生成过渡 CSS class 名。
       * 例如 `name: 'fade'` 将自动扩展为 `.fade-enter`、
       * `.fade-enter-active` 等。
       */
      name?: string
      /**
       * 是否应用 CSS 过渡 class。
       * 默认：true
       */
      css?: boolean
      /**
       * 指定要等待的过渡事件类型
       * 来确定过渡结束的时间。
       * 默认情况下会自动检测
       * 持续时间较长的类型。
       */
      type?: 'transition' | 'animation'
      /**
       * 显式指定过渡的持续时间。
       * 默认情况下是等待过渡效果的根元素的第一个 `transitionend`
       * 或`animationend`事件。
       */
      duration?: number | {
         enter: number; leave: number }
      /**
       * 控制离开/进入过渡的时序。
       * 默认情况下是同时的。
       */
      mode?: 'in-out' | 'out-in' | 'default'
      /**
       * 是否对初始渲染使用过渡。
       * 默认：false
       */
      appear?: boolean
    
      /**
       * 用于自定义过渡 class 的 prop。
       * 在模板中使用短横线命名，例如：enter-from-class="xxx"
       */
      enterFromClass?: string
      enterActiveClass?: string
      enterToClass?: string
      appearFromClass?: string
      appearActiveClass?: string
      appearToClass?: string
      leaveFromClass?: string
      leaveActiveClass?: string
      leaveToClass?: string
    }

\*\*在下列情形中，可以给任何元素和组件添加进入/离开过渡： \*\*

*  条件渲染 (使用 `v-if`)条件展示 (使用 `v-show`)
 *  动态组件
 *  组件根节点

#### 2.1 过渡动画class ####

*  `v-enter-from`：定义进入过渡的开始状态
    
        在元素被插入之前生效，在元素被插入之后的下一帧移除。
 *  `v-enter-active`：定义进入过渡生效时的状态
    
        在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。
        这个类可以被用来定义进入过渡的过程时间，延迟和曲线 函数。
 *  `v-enter-to`：定义进入过渡的结束状态
    
        在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除。
 *  `v-leave-from`：定义离开过渡的开始状态
    
        在离开过渡被触发时立刻生效，下一帧被移除。
 *  `v-leave-active`：定义离开过渡生效时的状态。
    
        在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。
        这个类可以被用来定义离开过渡的过程时间，延迟 和曲线函数。
 *  `v-leave-to`：离开过渡的结束状态。

在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被删除)，在过渡/动画完成之后移除。

#### 2.2 class添加的时机图示 ####

![在这里插入图片描述][2b91a3ffa42040b89180ec2ccfb5cfa4.png]

#### 2.3 class的命名规则 ####

> 如果使用的是一个没有name的transition，那么所有的class是以 v- 作为默认前缀
> 
> 如果transition组件添加了name属性，比如 那么class应以 fade- 开头

#### 2.4 没有name的transition用法 ####

**1）transition包裹需要添加动画的元素**

<template>
      <div class="app">
        <button @click="isShow = !isShow">切换</button>
    
        <transition>
          <h2 v-if="isShow">测试transition动画</h2>
        </transition>
      </div>
    </template>
    
    <script setup>
    import {
         ref } from 'vue';
    const isShow = ref(false)
    </script>

> 此时被transition包裹的h2元素就会拥有刚才编写的动画效果

**2）css写法**

*  `v-enter-from`、`v-leave-to`：进入前的样式和离开后的样式是一致的
 *  `v-enter-active`、`v-leave-active`：进入时的样式和离开时的样式是一致的
 *  `v-enter-to`、`v-leave-from`：进入后的样式和离开前的样式也是一致的

> 这基本就是使用Vue中transition动画的固定写法

#### 2.5 有name的transition用法 ####

**1）transition包裹需要添加动画的元素**

<template>
      <div class="app">
        <button @click="isShow = !isShow">切换</button>
    
        <transition name = "fade">
          <h2 v-if="isShow">测试transition动画</h2>
        </transition>
      </div>
    </template>
    
    <script setup>
    import {
         ref } from 'vue';
    const isShow = ref(false)
    </script>

**2）css写法**

> 此时被transition包裹的h2元素就会拥有刚才编写的动画效果

#### 2.6 Transition组件的原理 ####

\*\*当插入或删除包含在 `transition` 组件中的元素时，`Vue` 将会做以下处理： \*\*

*  自动嗅探目标元素是否应用了`CSS`过渡或者动画，如果有，那么在恰当的时机添加/删除 `CSS`类名；
 *  如果 `transition` 组件提供了`JavaScript`钩子函数，这些钩子函数将在恰当的时机被调用；
 *  如果没有找到`JavaScript`钩子并且也没有检测到`CSS`过渡/动画，`DOM`插入、删除操作将会立即执行；

### 三、Vue中的animation动画 ###

#### 3.1 没有name的transition用法 ####

**1）transition包裹需要添加动画的元素**

<template>
      <div class="app">
        <button @click="isShow = !isShow">切换</button>
        <transition>
          <h2 v-if="isShow">
            animation动画
          </h2>
        </transition>
      </div>
    </template>
    
    <script setup>
    import {
         ref } from 'vue';
    
    const isShow = ref(false)
    
    </script>

**2）css写法**

#### 3.2有name的transition用法 ####

**1）transition包裹需要添加动画的元素**

<template>
      <div class="app">
        <button @click="isShow = !isShow">切换</button>
        <transition name="fade">
          <h2 v-if="isShow">
            animation动画
          </h2>
        </transition>
      </div>
    </template>
    
    <script setup>
    import {
         ref } from 'vue';
    
    const isShow = ref(false)
    
    </script>

**2）css写法**

### 五、过渡模式mode的使用 ###

当前的动画在两个元素之间切换的时候可能会存在一些问题：

主要是进入和离开动画同时发生造成的视觉效果。

如果不希望同时执行进入和离开动画，那么可以设置`transition`的过渡模式：

*  `in-out`: 新元素先进行过渡，完成之后当前元素过渡离开；
 *  `out-in`: 当前元素先进行过渡，完成之后新元素过渡进入；

**基本使用示例**：

### 六、动态组件添加动画 ###

<div>
    	<button@click="show = · ! show">切换动态组件</button>
        <transition name="why">
        	<component :is="show ? ' home ' : 'about'"></component>
        </transition>
    </div>

### 七、appear初次渲染 ###

默认情况下，首次渲染的时候是没有动画的，如果希望给它添加动画效果，就可以增加另外一个属性appear。

<div>
    	<button @click="show = ·!show" >首次渲染动画效果</button>
        <transition name="why" appear>
            <component :is="show ? ' home' :  'about' "></component>
        </transition>
    </div>

### 八、使用transition动画和animation动画的注意点 ###

`Vue`为了知道过渡的完成，内部在监听`transitionend`或`animationend`，到底使用哪一个取决于元素应用的CSS规则。

**如果只是使用了其中的一个，那么`Vue`能自动识别类型并设置监听。**

**如果同时使用了过渡和动画呢可能贵出现一些问题：**

*  可能某一个动画执行结束时，另外一个动画还没有结束
 *  在这种情况下，我们可以设置`type`属性为`animation`或者`transition`来明确的告知`Vue`监听的类型
    
        <transition type="transition">
          <h2 v-show="isShow">
        	设置`type`属性为`animation`或者`transition`来明确的告知`Vue`监听的类型
          </h2>
        </transition>

### 八、列表的过渡TransitionGroup组件的使用 ###

**之前的过渡动画主要是针对单个元素或者组件的：**

*  要么是单个节点
 *  要么是同一时间渲染多个节点中的一个

如果希望渲染的是一个列表，并且该列表中添加删除数据有动画执行，可以使用`<transition-group>`组件。

**`<transition-group>`组件的属性：**

interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {
        
      /**
       * 如果未定义，则渲染为片段 (fragment)。
       */
      tag?: string
      /**
       * 用于自定义过渡期间被应用的 CSS class。
       * 在模板中使用 kebab-case，例如 move-class="xxx"
       */
      moveClass?: string
    }

**`<transition-group>`组件有如下的特点：**

*  默认情况下，它不会渲染一个元素的包裹器，但是可以指定一个元素并以`tag` 指定的标签进行渲染
 *  过渡模式(`mode`)不可用，因为不再相互切换特有的元素；
 *  内部元素总是需要提供唯一的`key` 属性值
 *  `CSS` 过渡的类将会应用在内部的元素中，而不是这个组/容器本身

#### 8.1 使用示例： ####

**1）定义模板和js**

<template>
      
      <div class="app">
        <button @click="addNumber">添加数字</button>
        <button @click="removeNumber">删除数字</button>
        <button @click="shuffleNumber">打乱数字</button>
        
        <transition-group tag="div" name="fade">
          <template v-for="item in nums" :key="item">
            <span>{
        {
         item }}</span>
          </template>
        </transition-group>
      </div>
    </template>
    
    <script setup>
    import {
         reactive, ref } from 'vue';
    import {
         shuffle } from "underscore";	// 可以用npm run underscore安装后引入shuffle(洗牌函数)
    
    const nums = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
    
    const addNumber = () => {
        
      nums.value.splice(randomIndex(), 0, nums.value.length)
    }
    
    const removeNumber = () => {
        
      nums.value.splice(randomIndex(), 1)
    }
    
    const shuffleNumber = () => {
        
      nums.value = shuffle(nums.value)
    }
    
    // 随机生成数字
    const randomIndex = () => {
        
      return Math.floor(Math.random() * nums.value.length)
    }
    
    </script>

**2）定义css类**

#### 8.2 过渡动画中的移动动画 ####

**在上面的案例中虽然新增的或者删除的节点是有动画的，但是对于哪些其他需要移动的节点是没有动画的**。

*  可以通过使用一个新增的`v-move`的`class`来完成动画
 *  它会在元素改变位置的过程中应用
 *  像之前的`name`一样，可以通过`name`来自定义前缀

只需要在上面的`<style>`标签中添加下面的样式：

[2b91a3ffa42040b89180ec2ccfb5cfa4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/93e5339ce168476d870e7e7894823d9b.png