（八）集成第三方库动画

集成第三方库动画

说明

集成第三方库，需要做一些配置，因为配置 Transition 和 TransitionGroup 是一样的，所以这里拿 Transition 做演示，他们可以通过 props 的方式来自定义 class 参数为一下6种

• props参数图

• 示例图，如设置 dev 的进程动画为 fadeIn

• 同时支持设置多个 class 多个 class 使用空格隔开，跟使用普通多个 class 一样

集成 animate.css

<template>
  <main>
    <div class="container">
      <button @click="show = !show">{{ show ? "隐藏" : "显示" }}</button>
      <Transition
        name="fadeAndScale"
        enter-active-class="animate__animated animate__bounceIn"
        leave-active-class="animate__animated animate__bounceOut"
      >
        <div v-if="show" class="box"></div>
      </Transition>
    </div>
  </main>
</template>

<script setup>
  // 在这里引入全局都可以使用
import "animate.css";
import { ref, Transition } from "vue";

const show = ref(false);
</script>