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 可以不用传,默认参数即可 * @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(); });
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
这篇文章主要介绍了Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-04-04
最新评论