animate.css在Vue中的使用

animate.css在Vue中的使用"/>

animate.css在Vue中的使用

# Vue集成第三方动画库animate.css官网链接：/安装：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官网地址：/

<template><div><button @click="showHide">显示与隐藏</button><transition-groupname="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>