animatecss动画效果

1. 官网

https://animatecss.node.org.cn/

2. 安装

npm install animate.css --save

1. 使用时需要在vue中引入：import "animate.css;
2. 与内置组件配合使用： <Transition>Vue官网链接
3. 如果按照animatecss官网的用法,则只能指定进入或退出其中一个动画效果

 <h1 class="animate__animated animate__bounce">An animated element</h1>

3. 使用

3.1 代码

<template><button @click="flag = !flag">切换组件</button><br /><TransitionleaveActiveClass="animate__animated animate__zoomOut"enterActiveClass="animate__animated animate__rotateIn"><divstyle="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 动画时间

1. 写在标签里

• 入和出的动画时间都是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">

2. 写在<style>中

<style scoped lang="scss">
.animate__animated.animate__zoomOut {--animate-duration: 1s;
}

3.3 需要注意的地方