SoFunction
Updated on 2025-03-04

How to use vue encapsulated animation library

Today I will share with you the packaging and use of Animate animation library

Introduced

npm i  --save

Introduced in the entry file

import '';

Packaging method

/**
  *
  * @param {*} element The H5 element object passed in
  * @param {*} animation name
  * @param {*} prefix can be passed without passing, the default parameters are
  * @returns
  */
export const animateCSS = (element, animation, prefix = 'animate__') => {
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`
    
    (`${prefix}animated`, animationName)
 
    function handleAnimationEnd(event) {
      ()
      (`${prefix}animated`, animationName)
      resolve('Animation ended')
    }
	
    ('animationend', handleAnimationEnd, {once: true})
  })
}

use

import { animateCSS } from "@/utils/function";
import { onMounted, ref } from "vue";
 
const introTitle = ref();
const introImg = ref();
const header = ref();
('Picked up');
const domAnime = () => {
  animateCSS(, "fadeInLeft");
   = "block";
 
  animateCSS(, "fadeInRight");
   = "block";
 
  animateCSS(, "fadeInDown");
};
 
onMounted(() => {
  domAnime();
});

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.