动画插件-animate.css

206 阅读1分钟

地址:www.npmjs.com/package/ani…

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>