vue封装Animate.css动画库的使用

Summer不秃

已于 2024-04-08 09:50:12 修改

阅读量443

点赞数 10

分类专栏： Vue 文章标签： vue.js css 前端前端框架 javascript html5

于 2024-02-27 11:43:47 首次发布

本文链接：https://blog.csdn.net/z001126/article/details/136318284

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天给大家分享一下Animate这个动画库的封装使用

引入Animate.css

封装方法

使用

引入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();
});