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.