# Vue集成第三方动画库
animate.css官网链接:https://animate.style/
安装:
npm install animate.css --save
在项目种引入
import "animate.css"
使用animate.css
给transition标签添加上固定的name属性
按需求添加上
enter-active-class="官网上自己找动画值" =》进入动画的过程
leave-acitve-class="官网上自己找动画值" =》离开动画的过程
<transition name="animate__animated animate__bounc" enter-active-class="" leave-acitve-class="">
animate官网地址:https://animate.style/
<template>
<div>
<button @click="showHide">显示与隐藏</button>
<transition-group
name="animate__animated animate__bounc"
enter-active-class="animate__fadeInBottomRight"
leave-active-class="animate__fadeOutUp"
:appear="true"
>
<div class="box" v-show="isShow" key="1"></div>
<div class="box" v-show="isShow" key="2"></div>
</transition-group>
</div>
</template>
<script>
import "animate.css";
export default {
data() {
return {
isShow: true,
};
},
methods: {
showHide() {
this.isShow = !this.isShow;
},
},
};
</script>
<style scoped>
.box {
width: 300px;
height: 30px;
background-color: pink;
}
</style>