1. 官网
https://animatecss.node.org.cn/
2. 安装
npm install animate.css --save
- 使用时需要在vue中引入：
import "animate.css; - 与内置组件配合使用：
<Transition>Vue官网链接 - 如果按照animatecss官网的用法,则只能指定进入或退出其中一个动画效果
<h1 class="animate__animated animate__bounce">An animated element</h1>
3. 使用
3.1 代码
<template>
<button @click="flag = !flag">切换组件</button>
<br />
<Transition
leaveActiveClass="animate__animated animate__zoomOut"
enterActiveClass="animate__animated animate__rotateIn"
>
<div
style="width: 200px; width: 200px; background-color: red"
v-if="flag"
></div>
</Transition>
</template>
<script setup lang="ts">
import { ref } from "vue";
import "animate.css";
const flag = ref(true);
</script>
<style scoped lang="scss">
// 调整动画的时间
.animate__animated.animate__zoomOut {
--animate-duration: 1s;
}
</style>
3.2 效果
3.3 动画时间
- 写在标签里
- 入和出的动画时间都是2000ms
<Transition
:duration="2000"
leaveActiveClass="animate__animated animate__zoomOut"
enterActiveClass="animate__animated animate__rotateIn"
>
- 入的动画时间是1000，出的是2000
<Transition
:duration="{enter: 1000, leave: 2000}"
leaveActiveClass="animate__animated animate__zoomOut"
enterActiveClass="animate__animated animate__rotateIn"
>
- 写在
<style>中
<style scoped lang="scss">
.animate__animated.animate__zoomOut {
--animate-duration: 1s;
}
3.3 需要注意的地方
