animatecss动画效果

YUELEI118

已于 2024-09-02 22:08:29 修改

阅读量278

点赞数 2

分类专栏：前端文章标签： vue3 css 动画前端

于 2024-08-21 21:21:02 首次发布

本文链接：https://blog.csdn.net/YUELEI118/article/details/141402839

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1. 官网

中文官网经常挂逼
洋文官网

2. 安装

npm install animate.css --save

使用时需要在vue中引入：import "animate.css;
与内置组件配合使用： <Transition>Vue官网链接
如果按照animatecss官网的用法,则只能指定"进入效果"或”退出效果“其中一个动画效果

 <h1 class="animate__animated animate__bounce">An animated element</h1>

3. 使用

3.1 代码

<template>
  <button @click="flag = !flag">切换组件</button>
  <br />
  <Transition
    leaveActiveClass="animate__animated animate__zoomOut"
    enterActiveClass="animate__animated animate__rotateIn"
  >
    <div
      style="width: 200px; width: 200px; background-color: red"
      v-if="flag"
    ></div>
  </Transition>
  
</template>

<script setup lang="ts">
import { ref } from "vue";
import "animate.css";
const flag = ref(true);
</script>

<style scoped lang="scss">
// 调整动画的时间
.animate__animated.animate__zoomOut {
  --animate-duration: 1s;
}
</style>

3.2 效果

在这里插入图片描述

3.3 动画时间

写在标签里

入和出的动画时间都是2000ms

  <Transition
    :duration="2000"
    leaveActiveClass="animate__animated animate__zoomOut"
    enterActiveClass="animate__animated animate__rotateIn"
  >

入的动画时间是1000，出的是2000

  <Transition
    :duration="{enter: 1000, leave: 2000}"
    leaveActiveClass="animate__animated animate__zoomOut"
    enterActiveClass="animate__animated animate__rotateIn"
  >

写在<style>中

<style scoped lang="scss">
.animate__animated.animate__zoomOut {
  --animate-duration: 1s;
}

3.3 需要注意的地方

1

在这里插入图片描述

2.

  <Transition>
      // Transition中只能包裹一组<div>
      // <component>:component导入的动态组件中，也只能有一组<div>
  </Transition>

否则报错：

报错：Component inside renders non-element root node that cannot be animated.

解释

这个错误提示 Component inside renders non-element root node that cannot be animated. 通常发生在 Vue 中使用组件时，它渲染了一个非元素类型的根节点，导致无法进行动画处理。