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