安装
npm install animate.css --save
在main.js引入
// animate.css 引入动画插件
import animated from 'animate.css'
Vue.use(animated);
其他组件使用需要加上animate__ 前缀
要想使用animate.css, 需要把相关标签用
<transition>.....</transition>
进行包裹,只能包裹单个标签。
使用
<transition-group>.....</transition-group>
可以包裹多个标签,注意一定要加key 这个属性值
appear :表示一上来就有动画效果。相当于:
:appear = 'true'
<!-- 分开设置入场`enter`和离场`leave`的运行时长 -->
<transition appear name="animate__animated animate__bounce"
enter-active-class="animate__slideInUp"
leave-active-class="animate__zoomOut"
:duration="{ enter:200, leave:1500 }" >
<div class="carInfo" v-if="show">
<el-button @click="show=false">送货</el-button>
</div>
</transition>