transition+animate.css 轻松实现动画效果

前言

大家好，今天我来给大家分享一篇关于在Vue项目中如何结合Transition组件和Animate.css样式库来实现精美动画效果。希望通过这篇文章，能让你的Vue项目更加生动有趣。话不多说，我们速度分享。- ̗̀(๑ᵔ⌔ᵔ๑)

准备工作

1. 在你的Vue项目中通过npm或yarn安装Animate.css样式库：

npm install animate.css
或
yarn add animate.css

2. 在项目main.js/main.ts中引入Animate.css：

import 'animate.css';

Transition组件的介绍

这里的介绍我们主要是结合官方文档来进行讲解，Transition | Vue.js (vuejs.org)

我们打开官方文档可以看到

这表明Transition组件只有由以下条件触发时才会生效，这里我们主要拿v-if来进行描述。这意味着Transition 组件包裹着的对象发生触发v-if时，才会触发Transition的动画效果。

而<Transition> 是 Vue 内置的一个抽象组件，它本身不渲染任何DOM元素，而是作为一个包装器，用来管理其内部子元素的过渡状态。当子元素被插入或移除时，<Transition> 会自动应用CSS类名或者调用JavaScript钩子函数，从而触发相应的过渡动画。
下面是钩子函数的官方截图

这里我详细讲讲各个钩子函数，钩子函数就是动画加载的各个时刻触发的事件，每个事件会添加不同的类名，类名就是上图所示。

（默认类名就是v-enter-from这样的，如果你给Transition组件加了name属性，就会变成 name-enter-from）

1. v-enter-from:过渡动画进入的瞬间添加此类名，然后消失（类也移除）
2. v-enter-active:动画进行的全程都在
3. v-enter-to:动画进行的全程都在

可能有人会有疑惑为什么to这个也一直都在？ 这里解释一下存在的原因是因为to表明的是你动画结束时想要处在什么状态，active一般是添加过渡或者是动画效果。from是起始状态，过渡顾名思义是需要从一个到另一个的过程才叫过渡，所以to这个状态在动画进入结束之前都是存在的。(个人看法，欢迎大佬指正)

1. .v-leave-from:(动画离开开始时) 和上面enter对应
2. .v-leave-active:(动画离开过程中)
3. .v-leave-to:(动画离开结束时)

在了解钩子函数之后我们就可以根据不同时刻来添加我们想要的动画效果啦，不过本人没什么艺术细胞所以还是喜欢用现成的。接下来就是我们的主角之一animate.css了

animate.css

为了快速实现高质量动画，可以集成第三方库，如Animate.css。只需引入Animate.css，并在<transition>组件上设置相应的类名，即可利用其预设的动画效果。示例代码如下：

<Transition
          class="animate__animated"
          enter-active-class="animate__fadeOutTopLeft"
          leave-active-class="animate__fadeOutTopRight"
        >
          <div v-if="isActive" class="emoji">{{ emoji }}</div>
</Transition>

这里的Animate.css生效需要添加两个类名，一个是固定的animate__animated，用来表明使用的是Animate.css，另一个就是你想要添加的动画样式了。这是官网Animate.css | A cross-browser library of CSS animations.

enter-active-class代表你进入的时候添加的是什么动画，leave-active-class代表着离开添加的动画效果。

结语

Vue.js的动画系统以其灵活性和易用性著称，无论是简单的淡入淡出，还是复杂的序列动画，都能通过上述方法轻松实现。结合良好的编程实践和现代前端工具，你将能打造出既美观又流畅的用户界面。持续探索Vue的动画世界，为你的项目注入更多创意与活力。

本次分享就到此为止了，喜欢的话可以点个关注或者是赞哦- ̗̀(๑ᵔ⌔ᵔ๑)