欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue封裝Animate.css動畫庫的使用方式

 更新時間：2024年04月29日 10:27:14   作者：Summer不禿  
這篇文章主要介紹了vue封裝Animate.css動畫庫的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

今天給大家分享一下Animate這個動畫庫的封裝使用

引入Animate.css

npm i animate.css --save

在main.js入口文件里引入

import 'animate.css';

封裝方法

/**
 * 
 * @param {*} element 傳入的H5元素對象
 * @param {*} animation 動畫名稱
 * @param {*} prefix 可以不用傳，默認參數(shù)即可
 * @returns 
 */
export const animateCSS = (element, animation, prefix = 'animate__') => {
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`
    
    element.classList.add(`${prefix}animated`, animationName)
 
    function handleAnimationEnd(event) {
      event.stopPropagation()
      element.classList.remove(`${prefix}animated`, animationName)
      resolve('Animation ended')
    }
	
    element.addEventListener('animationend', handleAnimationEnd, {once: true})
  })
}

使用

import { animateCSS } from "@/utils/function";
import { onMounted, ref } from "vue";
 
const introTitle = ref();
const introImg = ref();
const header = ref();
console.log('撿來了');
const domAnime = () => {
  animateCSS(introTitle.value, "fadeInLeft");
  introTitle.value.style.display = "block";
 
  animateCSS(introImg.value, "fadeInRight");
  introImg.value.style.display = "block";
 
  animateCSS(header.value, "fadeInDown");
};
 
onMounted(() => {
  domAnime();
});

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論