Install:npm i animate.css
在需要使用的地方引入即可,在vue3中可以配合transition使用
<script setup lang="ts">
/**
* 动画组件搭配animate使用
* 前置是需要安装animate: pnpm add animate.css -S
* 4.x版本的animate在使用时需有前置class animate__animated
*/
import C from "./components/C.vue";
import 'animate.css'
import {ref} from "vue";
const showC = ref(true);
</script>
<template>
<div>
动画组件配合动画库animate的使用
<button @click="showC = !showC">切换</button>
<transition :duration="2000" enter-active-class="animate__animated animate__bounceInRight"
leave-active-class="animate__animated animate__bounceOutLeft">
<C v-if="showC"/>
</transition>
</div>
</template>
<style scoped>
</style>