vue使用animate.css做连续、延迟动画笔记

最新推荐文章于 2025-08-13 16:36:39 发布

开心就好1314520

最新推荐文章于 2025-08-13 16:36:39 发布

阅读量903

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js css 笔记

本文链接：https://blog.csdn.net/qq_38388578/article/details/130124279

文章介绍了如何通过npm安装animate.css库，并在项目中创建一个名为animateCSS的JavaScript函数来应用动画效果。该函数使用Promise处理动画结束事件，实现在元素上添加和移除动画类。示例展示了如何在元素上应用zoomIn和fadeOut动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装

cnpm i animate.css --save

2、使用

1、新建utils/animateCSS.js

const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });
  export default animateCSS;

2、使用

import animateCSS from "@/utils/animateCSS";
 showGoodBox(){
       animateCSS('.good_box', 'zoomIn').then((message) => {
       
        this.showGood=false
        // animateCSS('.good_box', 'fadeOut').then((message) => {
            
        // });
      });
    },