vue封装Animate.css动画库的使用方式
作者：Summer不秃
这篇文章主要介绍了vue封装Animate.css动画库的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
今天给大家分享一下Animate这个动画库的封装使用
引入Animate.css
npm i animate.css --save
在main.js入口文件里引入
import 'animate.css';
封装方法
/**
*
* @param {*} element 传入的H5元素对象
* @param {*} animation 动画名称
* @param {*} prefix 可以不用传，默认参数即可
* @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();
});总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。