流水武qin
流水武qin

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

一、概述

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

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

因此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添加的时机图示

Veu进阶--transition动画和animation动画的使用详解_第1张图片

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: 当前元素先进行过渡，完成之后新元素过渡进入；

基本使用示例：

<template>
  <div class="app">
    <div>
      <button @click="isShow = !isShow">切换</button>
    </div>

    <!-- 使用mode属性 -->
    <transition name="why" mode="out-in">
      <h2 v-if="isShow">哈哈哈</h2>
      <h2 v-else>呵呵呵</h2>
    </transition>
  </div>
</template>

六、动态组件添加动画

<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组件的使用

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

  • 要么是单个节点

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

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

组件的属性：

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

组件有如下的特点：

  • 默认情况下，它不会渲染一个元素的包裹器，但是可以指定一个元素并以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类

<style scoped>
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
  transform: translateY(0);
}

.fade-enter-active,
.fade-leave-active {
  transition: all 2s ease;
}
    
.why-leave-active {
  position: absolute;
}
</style>

8.2 过渡动画中的移动动画

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

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

只需要在上面的