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