Vue.js 动画

在 Vue.js 应用程序中，我们可以像在前面的示例中应用过渡一样应用动画。动画也有你必须声明才能获得动画效果的类。

Vue.js 过渡和 Vue.js 动画之间唯一的区别是，在 Vue.js 动画中，v-enter 并非在元素插入后立即删除，而是在动画结束事件上删除。

让我们举个例子来理解动画的概念，看看动画在应用程序中是如何工作的。

示例

Index.html 文件

Index.js 文件

让我们使用一个简单的 CSS 文件来使输出更具吸引力。

Index.css 文件

程序执行后，您将看到以下输出

输出

当你点击“点击此处”按钮时，你可以看到动画效果。图像将从 0 度旋转到 360 度，最后消失。请看下图

另一张截图

示例说明

在上面的例子中，你可以看到我们使用了与过渡效果相同的类。在这里，我们用 p 标签包含了一个图像，如下所示

在这里，过渡的名称是 shiftx，并且该类被应用于以下 CSS 代码

在上面的代码中，该类是在过渡名称中定义的，即 shiftx-enter-active 和 .shiftx-leave-active.

动画定义了 从 0% 到 100% 的关键帧，其中 transform 定义在每个关键帧中，以度数表示，如下所示

自定义过渡类

Vue.js 允许你通过提供以下属性来指定你自己的自定义过渡类。这些属性可以添加到过渡元素中。

• enter-class
• enter-active-class
• enter-to-class (在版本 2.1.8+ 中添加)
• leave-class
• leave-active-class
• leave-to-class (在版本 2.1.8+ 中添加)

当我们想使用外部 CSS 库（例如 animate.css）时，通常使用自定义类。

让我们举个例子来理解自定义过渡类的概念，看看它们在应用程序中是如何工作的。

示例

Index.html 文件

Index.js 文件

程序执行后，您将看到以下输出

输出

当你点击“点击此处”按钮时，你可以看到两种类型的动画。应用于上述示例的第一个动画是

输出

第二个动画是

输出

在这里，我们使用了第三方库 animate.css 来展示自定义动画类在示例中的使用。