annimate.css中有非常多炫酷好看的动画效果,开发过程中经常会遇到要给某个组件添加动画效果的需求,使用vue的transition组件其实非常容易实现,只需要几行代码就可以,下面我来详述一下步骤。

详解在vue3中,如何使用animate.css中的过渡效果_animate.css

一、安装animate.css库

npm i animate.css -S

二、main.js中引入animate.css

import { createApp } from 'vue';
import App from './App.vue';
import animated from 'animate.css';

const app = createApp(App);
app.use(animated)

三、使用vue中的transition组件包裹在需要使用过渡动画的元素上

transition组件的enter-active-class属性对应元素出现的动画class,leave-active-class属性对应元素消失时的动画class。其中animate__animated是固定添加的。

<transition
  enter-active-class="animate__animated animate__fadeInRightBig"
  leave-active-class="animate__animated animate__fadeOutRightBig"
>
	<div v-if="show">过渡效果div</div>
</transition>

四、最后使用v-if控制元素出现和消失即可实现对应的过渡效果了。


注意:如果你使用element之类的UI库,UI库中的有些组件会自带一些过渡动画,如果把animate.css的过渡效果使用在有过渡效果的UI组件上,比如element的dialog组件,animate.css的过渡效果则会因为css冲突而不生效,所以animae.css最好是用在本来就没有过渡效果的元素或组件上,比如el-button、el-tag之类的。