动画库的使用(Vue)

一、animate.css

地址https://animate.style/

安装

使用 npm 安装：

npm install animate.css --save

将其导入到您的 main.js 文件中：

import 'animate.css';

vue的 transition 标签

<transition
      enter-active-class="animate__animated animate__lightSpeedInLeft"
      leave-active-class="animate__animated animate__zoomOut"
    >
        <p v-if="show">hello</p>
</transition>

效果：

 ​

类名	默认延迟时间
animate__delay-2s	2s
animate__delay-3s	3s
animate__delay-4s	4s
animate__delay-5s	5s

<transition
   enter-active-class="animate__animated animate__lightSpeedInLeft animate__delay-2s"
   leave-active-class="animate__animated animate__zoomOut"
 >
    <p v-if="show">hello</p>
</transition>

类名	默认速度时间
animate__slow	2s
animate__slower	3s
animate__fast	800ms
animate__faster	500ms

 <transition
   enter-active-class="animate__animated animate__lightSpeedInLeft animate__slower"
   leave-active-class="animate__animated animate__zoomOut"
    >
    <p v-if="show">hello</p>
 </transition>

 

 二、magic.css

安装

使用 npm 安装：

npm install magic.css --save

 将其导入到您的 main.js 文件中：

 vue的 transition 添加属性动画

 

也可以自定义属性添加动画时间