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-fromv-leave-to:进入前的样式和离开后的样式是一致的
  • v-enter-activev-leave-active:进入时的样式和离开时的样式是一致的
  • v-enter-tov-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-moveclass来完成动画
  • 它会在元素改变位置的过程中应用
  • 像之前的name一样,可以通过name来自定义前缀

只需要在上面的