一、animate.css
地址https://animate.style/
安装
使用 npm 安装:
npm install animate.css --save
将其导入到您的 main.js 文件中:
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 添加属性动画
?
也可以自定义属性添加动画时间
|