八、使用过渡和 CSS 为您的应用设置动画

要使应用更具动态性并得到用户的充分关注，使用动画至关重要。如今，CSS 动画出现在祝酒词、横幅、通知甚至输入字段中。

在某些情况下，您需要创建特殊的动画（称为过渡），并完全控制页面上发生的事情。要做到这一点，您必须使用自定义组件并使用框架来帮助您呈现应用。

有了 Vue，我们可以使用两个自定义组件，它们可以帮助我们在 CSS 类的帮助下在应用中创建动画和转换。这些组件是Transition和TransitionGroup。

在本章中，我们将学习如何创建 CSS 动画，使用 Animate.CSS 框架创建自定义转换，使用Transition组件挂钩执行自定义函数，创建在组件渲染时执行的动画，为组和列表创建动画和转换，创建可重用的自定义转换组件，并在组件之间创建无缝过渡。

在本章中，我们将介绍以下配方：

• 创建第一个 CSS 动画
• 使用 Animate.css 创建自定义转换类
• 使用自定义挂钩创建事务
• 在页面渲染中创建动画
• 为列表和组创建动画
• 创建自定义转换组件
• 在元素之间创建无缝过渡

技术要求

在本章中，我们将使用Node.js和Vue CLI。

Attention Windows users! You need to install an NPM package called windows-build-tools to be able to install the following required packages. To do so, open PowerShell as an Administrator and execute the > npm install -g windows-build-tools command.

要安装Vue CLI，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> npm install -g @vue/cli @vue/cli-service-global

创建基础项目

在本章中，我们将使用此项目作为每个配方的基础。在这里，我将指导您如何创建基本项目：

1. 打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> vue create {replace-with-recipe-name}

1. Vue CLI 将要求您选择预设；使用空格键选择Manually select features：

? Please pick a preset: (Use arrow keys)
  default (babel, eslint) ❯ Manually select features

1. 现在，Vue CLI 将询问您希望安装哪些功能。您需要选择CSS Pre-processors作为默认功能之上的附加功能：

? Check the features needed for your project: (Use arrow keys) ❯ Babel
  TypeScript
  Progressive Web App (PWA) Support
  Router
  Vuex ❯ CSS Pre-processors ❯ Linter / Formatter
  Unit Testing
  E2E Testing

1. 通过选择 linter 和 formatter 继续此过程。在本例中，我们将选择ESLint + Airbnb config：

? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only ❯ ESLint + Airbnb config ESLint + Standard config 
  ESLint + Prettier

1. 选择过梁的其他特征。在本例中，选择Lint on save和Lint and fix on commit：

? Pick additional lint features: (Use arrow keys)
  Lint on save ❯ Lint and fix on commit

1. 选择要放置 linter 和 formatter 配置文件的位置。在本例中，我们将选择In dedicated config files：

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) ❯ In dedicated config files  In package.json 

1. 最后，CLI 将询问您是否要为将来的项目保存设置；选择N。之后，Vue CLI 将为您创建文件夹并安装依赖项：

? Save this as a preset for future projects? (y/N) n

1. 从创建的项目中，打开位于src文件夹中的App.vue文件。在单文件组件的<script>部分，移除HelloWorld组件。添加一个data属性并将其定义为一个单例函数，该函数返回一个 JavaScript 对象，该对象的属性名为display，默认值为true：

<script>
export default {
  name: 'App',
  data: () => ({
    display: true,
  }),
};
</script>

1. 在单文件组件的<template>部分，删除HelloWorld组件并添加一个文本为Toggle的buttonHTML 元素。在imgHTML 元素中，添加一个绑定到display变量的v-if指令。最后，在buttonHTML 元素中，添加一个click事件。在事件侦听器中，将该值定义为一个匿名函数，该函数将display变量设置为display变量的否定：

<template>
  <div id="app">
    <button @click="display = !display">
      Toggle
    </button>
    <img
      v-if="display"
      alt="Vue logo" src=img/logo.png">
  </div>
</template>

根据这些说明，我们可以为本章中的每个配方创建一个基础项目。

创建第一个 CSS 动画

在 CSS 的帮助下，我们可以为应用设置动画，而无需通过 JavaScript 手动编程 DOM 元素的更改。使用专用于控制动画的特殊 CSS 属性，我们可以实现漂亮的动画和过渡。

要使用 Vue 中可用的动画，我们需要在动画应用于单个元素时使用名为Transition的组件，或者在处理组件列表时使用名为TransitionGroup的组件。

在本教程中，我们将学习如何创建 CSS 动画，并将此动画应用于 Vue 应用上的单个元素。

准备

以下是此配方的先决条件：

• Node.js 12+
• 名为cssanimation的 Vue CLI 基础项目

所需的 Node.js 全局对象如下：

• @vue/cli
• @vue/cli-service-global

怎么做。。。

使用基本项目，为此配方创建一个名为cssanimation的新项目，并打开项目文件夹。现在，按照以下步骤操作：

1. 打开App.vue文件。在单文件组件的<template>部分，用Transaction组件包装imgHTML 元素。在Transaction组件中，添加一个值为"image"的name属性：

<transition name="image">
  <img
    v-if="display"
    alt="Vue logo" src=img/logo.png">
</transition>

1. 在单文件组件的<style>部分，创建一个.image-enter-active类，其animation属性的值为bounce-in .5s。然后，创建一个具有值为bounce-in .5s reverse的animation属性的.image-leave-active类：

.image-enter-active {
  animation: bounce-in .5s;
}
.image-leave-active {
  animation: bounce-in .5s reverse;
}

1. 最后，创建一个@keyframes bounce-inCSS 规则。在其内部，执行以下操作：
   • 创建一个具有属性转换且值为scale(0)的0%规则。
   • 创建一个具有属性转换且值为scale(1.5)的50%规则。
   • 创建一个具有属性转换且值为scale(1)的100%规则：

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

执行此操作后，当第一次按下切换按钮时，图像将放大并消失。再次按下时，它将放大并在动画完成后保持在正确的比例：

它是如何工作的。。。

首先，我们将 Vue 动画包装器添加到要添加转换的元素中，然后添加将用于转换的 CSS 类的名称。

The Transition component uses pre-made namespaces for the CSS class that are required to be present. These are -enter-active, for when the component enters the screen, and -leave-active, for when the component leaves the screen.

然后，我们在<style>中创建 CSS 类，用于元素离开和进入屏幕的转换，并为bounce-in动画创建keyframe规则集，以定义其行为方式。

另见

您可以在上找到有关基于类的动画和 Vue 类转换的更多信息 https://v3.vuejs.org/guide/transitions-overview.html#class-基于动画的过渡。

您可以在中找到有关 CSS 关键帧的更多信息 https://developer.mozilla.org/en-US/docs/Web/CSS/@关键帧。

使用 Animate.css 创建自定义转换类

在Transition组件中，可以定义将在每个转换步骤中使用的 CSS 类。通过使用此属性，我们可以使Transition组件在过渡动画中使用 Animate.css。

在本食谱中，我们将学习如何将 Animate.css 类与Transition组件一起使用，以便在我们的组件中创建自定义转换。

准备

以下是此配方的先决条件：

• Node.js 12+
• 名为animatecss的 Vue CLI 基础项目

所需的 Node.js 全局对象如下：

• @vue/cli
• @vue/cli-service-global

怎么做。。。

使用基本项目，为此配方创建一个名为animatecss的新项目，并打开项目文件夹。现在，按照以下步骤操作：

1. 在项目文件夹内，打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），并执行以下命令以安装 Animate.css 框架：

> npm install animate.css@3.7.2

1. 打开src文件夹中的main.js文件，导入 Animate.css 框架：

import Vue from 'vue';
import App from './App.vue';
import 'animate.css';

1. 打开src文件夹中的App.vue文件，添加Transition组件作为imgHTML 元素的包装。在Transition组件中，添加一个名为enter-active-class的属性，并将其定义为"animated bounceInLeft"。然后，添加另一个名为leave-active-class的属性，并将其定义为"animated bounceOutLeft"：

<transition
  enter-active-class="animated bounceInLeft"
  leave-active-class="animated bounceOutLeft"
>
  <img
    v-if="display"
    alt="Vue logo" src=img/logo.png">
</transition>

执行此操作后，图像将向左滑出，并在第一次按下切换按钮时消失。再次按下时，它将从左侧滑入：

它是如何工作的。。。

Transition组件最多可以接收六个道具，这些道具可以为事务的每个步骤设置自定义类。这些道具是enter-class、enter-active-class、enter-to-class、leave-class、leave-active-class和leave-to-class。在这个配方中，我们使用了enter-active-class和leave-active-class；这些道具定义了当元素在屏幕上可见或离开屏幕时的自定义类。

为了使用自定义动画，我们使用 Animate.css 框架，该框架提供了预先制作并准备好使用的自定义 css 动画。我们使用了bounceInLeft和bounceOutLeft以使元素滑入和滑出屏幕。

还有更多。。。

您可以尝试更改 Animate.css 上可用的任何道具的enter-active-class和leave-active-class道具类，并查看 css 动画在浏览器上的行为。

您可以在[T0]的 Animate.css 文档中找到可用类的完整列表 https://animate.style/ 。

另见

您可以在上找到有关基于类的动画和 Vue 类转换的更多信息 https://v3.vuejs.org/guide/transitions-overview.html#class-基于动画的过渡。

有关 Animate.css 的更多信息，请访问https://animate.style/ 。

使用自定义挂钩创建事务

Transaction组件具有每个动画生命周期的自定义事件发射器。这些可用于附加动画循环完成时要执行的自定义函数和方法。

我们可以使用这些方法在页面事务完成或按钮动画结束后执行数据获取，从而根据动态数据以特定顺序链接需要一个接一个执行的动画。

在这个配方中，我们将学习如何使用Transaction组件的定制事件发射器来执行定制方法。

准备

以下是此配方的先决条件：

• Node.js 12+
• 名为transactionhooks的 Vue CLI 基础项目

所需的 Node.js 全局对象如下：

• @vue/cli
• @vue/cli-service-global

怎么做。。。

使用基本项目，为此配方创建一个名为transactionhooks的新项目，并打开项目文件夹。现在，按照以下步骤操作：

1. 在项目文件夹内，打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），并执行以下命令以安装 Animate.css 框架：

> npm install animate.css@3.7.2

1. 打开src文件夹中的main.js文件，导入 Animate.css 框架：

import Vue from 'vue';
import App from './App.vue';
import 'animate.css';

1. 打开src文件夹中的App.vue文件。在单文件组件的<script>部分，在数据属性的 singleton 函数中，添加一个名为status的新属性，其值定义为"appeared"：

data: () => ({
  display: true,
  status: 'appeared',
}),

1. 创建一个methods属性并将其定义为 JavaScript 对象。在对象内部，添加两个名为onEnter和onLeave的属性。在onEnter属性中，将其定义为函数，并在其内部将数据status变量设置为"appeared"。在onLeave属性中，将其定义为函数，并在其内部将数据status变量设置为"disappeared"：

methods: {
  onEnter() {
    this.status = 'appeared';
  },
  onLeave() {
    this.status = 'disappeared';
  },
},

1. 在单文件组件的<template>部分，添加一个Transition组件作为imgHTML 元素的包装器。在Transition组件中，执行以下操作：
   • 添加一个名为enter-active-class的属性，并将其定义为"animated rotateIn"。
   • 添加另一个名为leave-active-class的属性，并将其定义为"animated rotateOut"。
   • 添加事件侦听器after-enter绑定并将其附加到onEnter方法。
   • 添加事件侦听器after-leave绑定并将其附加到onLeave方法：

<transition
  enter-active-class="animated rotateIn"
  leave-active-class="animated rotateOut"
  @after-enter="onEnter"
  @after-leave="onLeave"
>
  <img
    v-if="display"
    alt="Vue logo" src=img/logo.png">
</transition>

1. 创建一个h1HTML 元素作为Transition组件的同级元素，并添加文本The image {{ status }}：

<h1>The image {{ status }}</h1>

现在，单击按钮时，文本将在动画结束时更改。它将显示动画完成进入时出现的图像，以及动画完成离开时消失的图像：

它是如何工作的。。。

Transition组件有八个自定义挂钩。这些钩子由 CSS 动画触发，当它们被触发时，它们会发出自定义事件，父组件可以使用这些事件。这些自定义事件为before-enter、enter、after-enter、enter-cancelled、before-leave、leave、after-leave和leave-cancelled。

当使用after-enter和after-leave钩子时，当 CSS 动画完成后，屏幕上的文本将相应地更改为每个钩子的事件侦听器上定义的函数。

另见

您可以在找到更多关于过渡挂钩的信息 https://v3.vuejs.org/guide/transitions-enterleave.html#javascript-挂钩。

有关 Animate.css 的更多信息，请访问https://animate.style/ 。

在页面渲染中创建动画

使用显示在页面呈现上的页面转换动画或自定义动画是常见的，有时需要使用这些动画来吸引应用用户的注意。

可以在 Vue 应用中创建此效果，而无需刷新页面或重新呈现屏幕上的所有元素。您可以使用Transition组件或TransitionGroup组件执行此操作。

在此配方中，我们将学习如何使用Transition组件，以便在呈现页面时触发动画。

准备

以下是此配方的先决条件：

• Node.js 12+
• 名为transactionappear的 Vue CLI 基础项目

所需的 Node.js 全局对象如下：

• @vue/cli
• @vue/cli-service-global

怎么做。。。

使用基本项目，为此配方创建一个名为transactionappear的新项目，并打开项目文件夹。现在，按照以下步骤操作：

1. 在项目文件夹内，打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），并执行以下命令以安装 Animate.css 框架：

> npm install animate.css@3.7.2

1. 打开src文件夹中的main.js文件，导入 Animate.css 框架：

import Vue from 'vue';
import App from './App.vue';
import 'animate.css';

1. 打开src文件夹中的App.vue文件，添加Transition组件作为imgHTML 元素的包装。在Transition组件中，执行以下操作：
   • 添加一个名为appear-active-class的属性，并将其定义为"animated jackInTheBox"。
   • 添加一个名为enter-active-class的属性，并将其定义为"animated jackInTheBox"。
   • 添加另一个名为leave-active-class的属性，并将其定义为"animated rollOut"。
   • 添加appear属性，定义为true：

<transition
  appear
  appear-active-class="animated jackInTheBox"
  enter-active-class="animated jackInTheBox"
  leave-active-class="animated rollOut"
>
  <img
    v-if="display"
    alt="Vue logo" src=img/logo.png">
</transition>

当页面打开时，Vue 徽标将像盒子中的插孔一样抖动，并在动画完成运行后保持静止：

它是如何工作的。。。

Transition组件有一个名为appear的特殊属性，启用该属性后，元素在屏幕上渲染时会触发动画。此属性附带三个用于控制动画 CSS 类的属性，分别称为appear-class、appear-to-class和appear-active-class。

有四个自定义钩子也使用这个属性执行，它们被称为before-appear、appear、after-appear和appear-cancelled。

在我们的例子中，我们让组件在屏幕上渲染时从 Animate.css 框架执行jackInTheBox动画。

另见

您可以在找到有关初始渲染时的过渡的更多信息 https://v3.vuejs.org/guide/transitions-enterleave.html#transitions-初始渲染时。

有关 Animate.css 的更多信息，请访问https://animate.style/ 。

为列表和组创建动画

有些动画需要在一组元素或列表中执行。这些动画需要包装在TransitionGroup元素中才能工作。

此组件的某些属性与Transition组件中的属性相同，但要使其正常工作，必须为子元素和特定于此组件的组件定义一组特殊说明。

在这个配方中，我们将创建一个动态图像列表，当用户单击相应的按钮时，将添加这些图像。这将在图像出现在屏幕上时执行动画。

准备

以下是此配方的先决条件：

• Node.js 12+
• 名为transactiongroup的 Vue CLI 基础项目

所需的 Node.js 全局对象如下：

• @vue/cli
• @vue/cli-service-global

怎么做。。。

使用基本项目，为此配方创建一个名为transactiongroup的新项目，并打开项目文件夹。现在，按照以下步骤操作：

1. 在项目文件夹内，打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），并执行以下命令以安装 Animate.css 框架：

> npm install animate.css@3.7.2

1. 打开src文件夹中的main.js文件，导入 Animate.css 框架：

import Vue from 'vue';
import App from './App.vue';
import 'animate.css';

1. 打开src文件夹中的App.vue文件。在单文件组件的<script>部分，在data单例上，返回一个名为count的属性，其值为0：

data: () => ({
  count: 0,
}),

1. 在单文件组件的<template>部分，删除div#appHTML 元素中的所有内容。然后，作为div#appHTML 元素的子元素，创建一个TransitionGroup组件，其中名为tag的属性定义为"ul"，名为enter-active-class的属性定义为"animated zoomIn"：

<div id="app">
  <transition-group
    tag="ul"
    enter-active-class="animated zoomIn"
  ></transition-group>
</div>

1. 作为TransitionGroup组件的子级，使用v-for指令创建一个liHTML 元素，将count变量迭代为i in count。添加一个名为key的变量属性，定义为i和一个名为"float: left"的style属性。作为liHTML 组件的子组件，创建一个imgHTML 组件，其src属性定义为"https://picsum.photos/100"：

<li
  v-for="i in count"
  :key="i"
  style="float: left"
>
  <img src="https://picsum.photos/100"/>
</li>

1. 然后，作为TransitionGroup组件的同级元素，创建一个hrHTML 元素，其style属性定义为"clear: both"：

<hr style="clear: both"/>

1. 最后，作为hrHTML 元素的同级，使用click事件创建buttonHTML 元素，将1添加到当前count变量中，并将文本设置为Increase：

<button
  @click="count = count + 1"
>
  Increase
</button>

现在，当用户单击相应的按钮以增加列表时，将向列表中添加一个新项目，并触发放大动画：

它是如何工作的。。。

TransitionGroup元素使用您在tag属性中声明的标记创建包装器元素。这将通过使用子元素的唯一关键帧检查子元素的唯一标识来管理将触发动画的自定义元素。因此，TransitionGroup组件中的所有子元素都需要声明一个key，并且必须是唯一的。

在我们的例子中，我们使用ul和liHTML 元素的组合创建了一个 HTML 列表，其中TransitionGroup由ul标记定义，子元素由liHTML 元素定义。然后，我们在一个数字上创建了一个虚拟迭代。这意味着将有一个项目列表，并根据该列表中的项目数在屏幕上显示图像。

为了增加我们的列表，我们创建了一个buttonHTML 元素，每次按下count变量时，它的计数都会增加一个。

另见

您可以在找到更多关于过渡组的信息 https://v3.vuejs.org/guide/transitions-list.html#reusable-转变。

有关 Animate.css 的更多信息，请访问https://animate.style/ 。

创建自定义转换组件

使用框架创建应用很好，因为您可以创建可重用的组件和可共享的代码。使用此模式对于简化应用的开发非常有用。

创建一个可重用的转换组件与创建一个可重用的组件是一样的，并且可以有一个更简单的方法，因为它可以用于函数渲染而不是普通的渲染方法。

在本配方中，我们将学习如何创建可在应用中使用的可重用功能组件。

准备

本章的先决条件如下：

• Node.js 12+
• 名为customtransition的 Vue CLI 基础项目

所需的 Node.js 全局对象如下：

• @vue/cli
• @vue/cli-service-global

怎么做。。。

使用基本项目，为此配方创建一个名为customtransition的新项目，并打开项目文件夹。现在，按照以下步骤操作：

1. 在项目文件夹内，打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），并执行以下命令以安装 Animate.css 框架：

> npm install animate.css@3.7.2

1. 打开src文件夹中的main.js文件，导入 Animate.css 框架：

import Vue from 'vue';
import App from './App.vue';
import 'animate.css';

1. 在src/components文件夹中创建一个名为CustomTransition.vue的新文件并打开它。在单文件组件的<template>部分，添加functional属性以启用组件的功能渲染。然后，创建一个Transition组件，appear变量属性定义为props.appear。将enter-active-class属性定义为"animated slideInLeft"，将leave-active-class属性定义为"animated slideOutRight"。最后，在Transition组件内添加一个<slot>占位符：

<template functional>
  <transition
    :appear="props.appear"
    enter-active-class="animated slideInLeft"
    leave-active-class="animated slideOutRight"
  >
    <slot />
  </transition>
</template>

1. 打开src文件夹中的App.vue文件。在单文件组件的<script>部分，导入新创建的CustomTransition组件。在 Vue 对象上，添加名为components的新属性，将其定义为 JavaScript 对象，并添加导入的CustomTransition组件：

<script>
import CustomTransition from './components/CustomTransition.vue';

export default {
  name: 'App',
  components: {
    CustomTransition,
  },
  data: () => ({
    display: true,
  }),
};
</script>

1. 最后，在单文件组件的<template>部分，用CustomTransition组件包装imgHTML 元素：

<custom-transition>
  <img
    v-if="display"
    alt="Vue logo" src=img/logo.png">
</custom-transition>

使用此自定义组件，可以重用转换，而无需重新声明Transition组件和组件上的转换 CSS 类：

它是如何工作的。。。

首先，我们使用 functional component 方法创建了一个自定义组件，其中不需要声明单个文件组件的<script>部分。

在这个定制组件中，我们使用Transaction组件作为基础组件。然后，我们使用注入的函数上下文定义了appear属性prop.appear，并添加了动画类，以便在渲染组件时从左侧滑入，在销毁组件时从右侧滑出。

然后，在主应用中，我们使用这个定制组件包装[T0]HTML 元素，并使其作为[T1]组件工作。

另见

有关可重用转换组件的更多信息，请访问https://v3.vuejs.org/guide/transitions-list.html#reusable-转变。

有关 Animate.css 的更多信息，请访问https://animate.style/ 。

在元素之间创建无缝过渡

当两个组件之间存在动画和过渡时，它们需要无缝，以便用户在将组件放置在屏幕上时不会看到 DOM 抖动和重画。为了实现这一点，我们可以使用Transition组件和 transition mode 属性来定义转换将如何发生。

在此配方中，我们将使用Transition组件和“过渡模式”属性在图像之间创建过渡，以创建无缝动画。

准备

本章的先决条件如下：

• Node.js 12+
• 名为seamlesstransition的 Vue CLI 基础项目

所需的 Node.js 全局对象如下：

• @vue/cli
• @vue/cli-service-global

怎么做。。。

使用基本项目，为此配方创建一个名为seamlesstransition的新项目，并打开项目文件夹。现在，按照以下步骤操作：

1. 打开src文件夹中的App.vue文件。在单文件组件的<style>部分，创建一个名为.rotate-enter-active,.rotate-leave-active的属性，并将transitionCSS 样式属性定义为transform .8s ease-in-out;。然后，创建一个名为.rotate-enter,.rotate-leave-active的属性，并将transformCSS 样式属性定义为rotate( -180deg );和transition定义为.8s ease-in-out;：

.rotate-enter-active,
.rotate-leave-active {
  transition: transform .8s ease-in-out;
}

.rotate-enter,
.rotate-leave-active {
  transform: rotate( -180deg );
  transition: transform .8s ease-in-out;
}

1. 在单文件组件的<template>部分，用Transition组件包装imgHTML 元素。然后，将name属性定义为rotate，将mode属性定义为out-in：

<transition
  name="rotate"
  mode="out-in"
></transition>

1. 在Transition组件内部，在imgHTML 元素中添加key属性，并将其定义为up。然后，添加另一个imgHTML 元素并添加一个v-else指令。添加key属性并定义为down，添加src属性并定义为img/logo.png"，最后添加style属性并定义为"transform: rotate(180deg)"：

<img
  v-if="display"
  key="up"
  src=img/logo.png">
<img
  v-else
  key="down"
  src=img/logo.png"
  style="transform: rotate(180deg)"
>

当用户切换元素时，将执行离开的动画，然后在完成后，进入的动画将立即开始。这使得旧元素和新元素之间实现无缝过渡：

它是如何工作的。。。

Transition组件有一个名为mode的特殊属性，可以在其中定义元素的过渡动画的行为。此行为将创建一组规则，用于控制动画步骤在Transition组件中的发生方式。可以在组件中使用"in-out"或"out-in"模式：

• 在"in-out"行为中，新元素转换将首先发生，完成后，旧元素转换将开始。
• 在"out-in"行为中，先发生旧元素转换，然后开始新元素转换。

在我们的例子中，我们创建了一个将 Vue 徽标倒置的动画。然后，为了处理这个无缝的变化，我们使用了"out-in"模式，这样新元素只有在旧元素完成转换后才会出现。

另见

有关过渡模式的更多信息，请访问https://v3.vuejs.org/guide/transitions-enterleave.html 。

---

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/14316.html