网址
官网:http://animate.style
npm管理网站:https://www.npmjs.com/package/animate.css
下载
npm install(i) animate.css
当前版本号:+ animate.css@4.1.1
如何使用动画库
第一、下载动画库
第二、引入animate.css
<link rel="stylesheet" href="./node_modules/animate.css/animate.min.css" />
第三步、使用
<transition leave-active-class='animate__animated animate__bounceOut' enter-active-class='animate__animated animate__lightSpeedInRight'>
<div v-show='isShow' class="box"></div>
</transition>
进入的动画库类名调用: enter-active-class
离开的动画库类名调用: leave-active-class
过渡动画的使用场景
v-if
v-show
路由切换
动态is就是动态组件的切换
注意点:
页面出现多个过渡动画的时候,不建议两种状态都使用,会花里胡哨,眼花缭乱。一般建议大家用enter-active-class
<div id="app">
<button @click="isShow=!isShow">点击我切换</button>
<transition
enter-active-class="animate__animated animate__lightSpeedInRight"
>
<h1 v-show="isShow">{{msg}}</h1>
</transition>
<transition
enter-active-class="animate__animated animate__rotateOutDownLeft"
>
<h1 v-show="!isShow">{{info}}</h1>
</transition>
</div>