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();
});總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue中v-on的基礎用法、參數(shù)傳遞和修飾符的示例詳解
使用v-on:click給button綁定監(jiān)聽事件以及回調函數(shù)，@是v-on:的縮寫，也就是簡寫也可以使用@click，這篇文章主要介紹了Vue中v-on的基礎用法、參數(shù)傳遞和修飾符,需要的朋友可以參考下2022-08-08
解決Vue中的生命周期beforeDestory不觸發(fā)的問題
這篇文章主要介紹了解決Vue中的生命周期beforeDestory不觸發(fā)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue的Virtual Dom實現(xiàn)snabbdom解密
這篇文章主要介紹了vue的Virtual Dom實現(xiàn)- snabbdom解密，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Vue和React都是流行的前端框架,它們有很多相似之處,如組件化和使用虛擬DOM,但是,它們在設計理念、組件存在形式、diff優(yōu)化和中文文檔方面存在一些不同,這篇文章給大家介紹面試官常問Vue和React區(qū)別,感興趣的朋友一起看看吧2025-02-02
父組件使用 props 把數(shù)據(jù)傳給子組件，子組件使用 $emit 觸發(fā)父組件的自定義事件，今天通過示例給大家詳細介紹下Vue?關于$emit與props的使用，感興趣的朋友一起看看吧2022-03-03
Vue3的ts報錯:類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法
這篇文章主要給大家介紹了關于Vue3的ts報錯:類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法,這是最近做項目中遇到的一個問題,這里給大家總結下解決辦法,需要的朋友可以參考下2023-08-08
vue-cli 是 vue 官方團隊推出的一款快速開發(fā) vue 項目的構建工具，具有開箱即用并且提供簡潔的自定義配置等功能。這篇文章主要介紹了快速了解vue-cli 3.0 新特性,需要的朋友可以參考下2018-02-02
Vue編寫可顯示周和月模式的日歷 Vue自定義日歷內容的顯示
這篇文章主要為大家詳細介紹了Vue編寫可顯示周和月模式的日歷，Vue自定義日歷內容的顯示，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
在項目中經常有些函數(shù)和變量是需要復用,比如說網站服務器地址,從后臺拿到的用戶的登錄token,用戶的地址信息等,這時候就需要設置一波全局變量,這篇文章主要給大家介紹了關于Vue項目中定義全局變量的幾種常用方法的相關資料,需要的朋友可以參考下2023-12-12