（八）集成第三方库动画

老怪兽

发布于 2023-02-22 18:58:30

1290

发布于 2023-02-22 18:58:30

文章被收录于专栏：老怪兽的前端之旅老怪兽的前端之旅

集成第三方库动画

说明

集成第三方库，需要做一些配置，因为配置 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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年11月11日，如有侵权请联系 cloudcommunity@tencent.com 删除

css