animate.css官方下载地址
代码演示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue中自定义动画和使用animate.css动画库</title><link rel="stylesheet" href="animate.min.css"><script src="./vue.js"></script><style>/* 自定义动画 */@keyframes scale {0% {transform: scale(0);}50% {transform: scale(1.5);}100% {transform: scale(1);}}/* 自定义的入场动画类名 */.enter {transform-origin: 0% 50%;animation: scale 2s;}/* 自定义的出场动画类名 */.leave {transform-origin: 0% 50%;animation: scale 2s reverse;}</style></head><body><div id="app"><button @click="show">SWITCH</button><!-- 这是自定义animate动画 --><!-- appear - boolean，是否在初始渲染时使用过渡。默认为 false。 --><transitionenter-active-class="enter"leave-active-class="leave"appearappear-active-class="enter"><div v-if="isShow">哈哈哈哈</div></transition><!-- 使用animate动画库 --><!-- appear - boolean，是否在初始渲染时使用过渡。默认为 false。 --><transition enter-active-class="animate__animated animate__bounce"leave-active-class="animate__animated animate__flash"appearappear-active-class="animate__animated animate__bounce"><div v-if="isShow">animate.css</div></transition></div><script>var vm = new Vue({el: "#app",data: {isShow: true},methods: {show() {this.isShow = !this.isShow}}})</script></body></html>
