CSS Notes17:CSS动态库

Animate.css

Animate.css | A cross-browser library of CSS animations.

Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

https://animate.style/

greensock

GreenSock

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js DrawSVGPlugin allows you to progressively reveal (or hide) SVG strokes to make them look like they're being drawn. MorphSVGPlugin to Morph any SVG shape into any other shape smoothly regardless of the number of points in each. MotionPathPlugin allows you to easily move any object along a path.

https://greensock.com/

<div id="analybox" class="animate__animated animate__bounce"></div>

transition结合animate动态库

<template>
  <div class="main">
    <!-- 动画组件 -->
    <button @click="flag2 = !flag2">切换动画</button>
    <transition enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__fadeInRight">
      <div v-if="flag2" class="box">我是动画啊</div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import 'animate.css'

let flag2 = ref<Boolean>(true)
</script>
<style lang="scss" scoped>
.main {
  flex: 1;
  margin: 14px;
  border: 1px solid #ccc;
  overflow: auto;

  .box {
    width: 100px;
    height: 100px;
    background: red;
  }
}
</style>

vue3之transition动画组件_小渣亮的博客-CSDN博客_transition vue3

目录vue3之transition动画组件一个简单的过度效果 淡入淡出自定义过度 动画的类名animate动画库vue3之transition动画组件 <transition name="fade"> <div v-if="flag2" class="box">我是动画啊</div> </transition>动画组件就是使用 transition 组件，然后使用 name的定义 传递进入组件动画的类名等样式触发机制

https://blog.csdn.net/weixin_43845137/article/details/123381986