vue封裝Animate.css動(dòng)畫(huà)庫(kù)的使用方式
更新時(shí)間：2024年04月29日 10:27:14 作者：Summer不禿
這篇文章主要介紹了vue封裝Animate.css動(dòng)畫(huà)庫(kù)的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
今天給大家分享一下Animate這個(gè)動(dòng)畫(huà)庫(kù)的封裝使用
引入Animate.css
npm i animate.css --save
在main.js入口文件里引入
import 'animate.css';
封裝方法
/**
*
* @param {*} element 傳入的H5元素對(duì)象
* @param {*} animation 動(dòng)畫(huà)名稱(chēng)
* @param {*} prefix 可以不用傳，默認(rèn)參數(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('撿來(lái)了');
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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目開(kāi)發(fā)中setTimeout等定時(shí)器的管理問(wèn)題
這篇文章主要介紹了vue項(xiàng)目開(kāi)發(fā)中setTimeout等定時(shí)器的管理問(wèn)題,需要的朋友可以參考下2018-09-09
vue3實(shí)現(xiàn)數(shù)字滾動(dòng)特效實(shí)例詳解
這篇文章主要為大家介紹了vue3實(shí)現(xiàn)數(shù)字滾動(dòng)特效實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了vue異步加載dom元素之后無(wú)法獲得的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
詳解?Vue虛擬DOM如何提高前端開(kāi)發(fā)效率
這篇文章主要為大家介紹了詳解?Vue虛擬DOM如何提高前端開(kāi)發(fā)效率,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
Vue3中的defineExpose函數(shù)用法深入解析
這篇文章主要介紹了Vue3中的defineExpose函數(shù)用法的相關(guān)資料,defineExpose是Vue3中用于在模式下暴露組件內(nèi)部屬性和方法的輔助函數(shù),它允許父組件通過(guò)ref訪(fǎng)問(wèn)子組件的暴露內(nèi)容,提高組件間的交互能力并保持封裝性,需要的朋友可以參考下2025-01-01
vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況
這篇文章主要介紹了vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表格合并功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了Vue切換Tab動(dòng)態(tài)渲染組件的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue前端開(kāi)發(fā)之實(shí)現(xiàn)交錯(cuò)過(guò)渡動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)Vue實(shí)現(xiàn)交錯(cuò)過(guò)渡動(dòng)畫(huà)效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
從Echarts報(bào)錯(cuò)中學(xué)習(xí)Vue3?ref和shallowRef區(qū)別及其組件二次封裝demo
這篇文章主要介紹了從Echarts報(bào)錯(cuò)中學(xué)習(xí)Vue3?ref和shallowRef區(qū)別及其組件二次封裝demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11