动画

组件

像我们在上面两个示例中所做的那样，使用纯 CSS 过渡和动画没有任何问题。

但幸运的是，Vue 为我们提供了内置的 组件，如果我们想要在使用 v-if 或 v-show 从应用程序中删除或添加元素时对其进行动画处理，因为用纯 CSS 动画很难做到这一点。

首先让我们创建一个应用程序，其中按钮添加或删除

标签:

示例

App.vue:

现在让我们将 组件包裹在

标签周围，看看如何以动画方式删除

标签。

当我们使用 组件时，我们会自动获得六个不同的 CSS 类，我们可以使用它们在添加或删除元素时设置动画。

在下面的示例中，我们将使用自动可用的类 v-leave-from 和 v-leave-to 在删除

标签时制作淡出动画:

示例

App.vue:

六个 类

当我们使用 组件时，有六个类自动可供我们使用。

由于 组件内的元素是 added，我们可以使用前三个类来为该过渡设置动画:

1. v-enter-from
2. v-enter-active
3. v-enter-to

由于元素在 组件内删除，我们可以使用接下来的三个类 :

4. v-leave-from
5. v-leave-active
6. v-leave-to

注意: 组件的根级别上只能有一个元素。

现在，让我们使用其中的四个类，以便在添加

标签和删除它时都可以制作动画。

示例

App.vue:

我们还可以使用 v-enter-active 和 v-leave-active 在元素添加期间或删除期间设置样式或动画:

示例

App.vue:

Transition 'name' 属性

如果您有多个 组件，但您希望至少其中一个 组件具有不同的动画，则需要为 组件使用不同的名称来区分它们。

我们可以使用 name 属性选择 组件的名称，这也会更改过渡类的名称，以便我们可以为该组件设置不同的 CSS 动画规则。

如果将过渡 name 属性值设置为 'swirl'，自动可用的类现在将以 'swirl-' 开头，而不是 'v-':

1. swirl-enter-from
2. swirl-enter-active
3. swirl-enter-to
4. swirl-leave-from
5. swirl-leave-active
6. swirl-leave-to

在下面的示例中，我们使用 name 属性为 组件提供不同的动画。 一个 组件没有指定名称，因此使用自动生成的以"v-"开头的 CSS 类来指定动画。 另一个 组件被命名为"swirl"，以便可以使用自动生成的以"swirl-"开头的 CSS 类为其指定动画规则。

示例

App.vue:

JavaScript 过渡钩子

刚才提到的每个 Transition 类都对应一个事件，我们可以钩子该事件来运行一些 JavaScript 代码。

当下面的示例中发生 after-enter 事件时，会运行一个显示红色

  ...

  1. v-enter-
  2. v-enter-
  3. v-enter-

表单输入

动画与 v-for