在vue中使用animate.css制作过渡动画

一、安装与引入

使用npm安装

npm install animate.css --save

在main.js中引入

import animated from 'animate.css'

Vue.use(animated)

二、使用animate动画

animate.css是一款预设的CSS3动画库
我们只需要用transisiton标签包裹 需要添加动画的div，
并在transition标签中：
将显示动画的类 赋给 ' enter-active-class '
将消失动画的类 赋给 ' leave-active-class '
并使用v-show来对内部div的显示和消失作切换

<transition
    enter-active-class="animate__animated animate__fadeInUp"
    leave-active-class="animate__animated animate__fadeOutDown"
>
    <div v-show="this.show">box</div>
</transition>

注意：
1、animate__animated 这个类是必须的，中间是2段连续的下划线
2、如果过渡动画没有生效，可以尝试给transition标签添加 appear 属性

更多动画效果请参考animates.css官网