【Vue项目实战】Vue3动画神操作！教你如何实现PPT一样的动画效果！
文章目录
- 前言
- 一、Animate.css是什么？
- 二、安装和使用
-
- 1.安装
- 2.基本用法
- 3.JavaScript用法
- 三、动画制作
-
- 1.弹入动画
- 总结
前言
最近写界面的时候，发现一个前端组件很好玩
他就是鼎鼎大名的【 Animate.css 】 ← 点 击 跳 转 官 网
这篇主要详细介绍 Animate.css 的使用，还有一些简单实用的前端动画制作
提示：以下是本篇文章正文内容，下面案例可供参考，部分内容翻译于官网
一、Animate.css是什么？
提示：这边简短的介绍一下Animate.css
Animate.css是一个前端样式拆箱即用的库，跨浏览器动画可用于你的构建你的前端项目
非常适合用来强调一些信息，比如一些主页、滑块和引导提示
二、安装和使用
1.安装
使用 npm 进行安装，命令如下：
npm install animate.css --save
使用 yarn 进行安装，命令如下：
yarn add animate.css
导入到要使用的页面中，代码如下：
import 'animate.css';
使用cdn引入如下：
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
head>
2.基本用法
安装完成后，添加 animate__animated 到H5元素的class里面，然后追加前缀和动画名字，代码如下：
//这边演示的是bounce（弹）动画
<h1 class="animate__animated animate__bounce">一个动画元素h1>
3.JavaScript用法
因为下边示例中会使用到此用法，这边展示并说明一下这个用法，代码如下：
//这边定义一个animateCSS方法
//第一个参数element为传入的H5元素对象
//第二个参数是对应的动画名称
//第三个参数可以不用传，默认参数即可
const animateCSS = (element, animation, prefix = 'animate__') =>
//这边创建了一个Promise，用来执行动画
new Promise((resolve, reject) => {
//给动画名加上前缀
const animationName = `${prefix}${animation}`
//获取H5元素节点
const node = document.querySelector(element)
//对元素节点添加class
node.classList.add(`${prefix}animated`, animationName)
//这边用来监听当动画运行完毕时，删除对应元素的class值
function handleAnimationEnd(event) {
event.stopPropagation()
node.classList.remove(`${prefix}animated`, animationName)
resolve('Animation ended')
}
//元素节点添加动画结束监听器
node.addEventListener('animationend', handleAnimationEnd, {once: true})
})
Animate.css使用说明到这边，其他详细用法请至官网查看
三、动画制作
1.弹入动画
左弹入动画，如下图演示：
这边图片使用Vite的标志图片演示动画
左弹入的动画名字是 【 bounceInLeft 】，相关代码如下：
以下代码在Vue3中实现，采用setup语法糖编写
<template>
<div class="home" ref="home">
//这个图片你可以用任何无底图的png格式的图片代替
<img class="vite" ref="vite" src="@/assets/vite.png">
</div>
</template>
<script setup>
import {onMounted, ref} from 'vue';
//在utils文件夹中创建index.js文件里export上面的animateCSS方法
import {animateCSS} from '@/utils';
//延迟时间（毫秒），这边测试动画播放完的衔接时间间隔最好是1100毫秒
const timeout = 1100,
vite = ref(),
//动画方法
viteAnime = () => {
//传入img元素对象和动画名字
animateCSS(vite.value, 'bounceInLeft')
vite.value.style.display = 'block'
//TODO 这边会补充上、右和下面的弹入动画实现代码
}
onMounted(() => {
viteAnime()
})
</script>
<style scope>
* {
margin: 0;
padding: 0;
}
img {
display: none;
}
body {
overflow: hidden;
justify-content: center;
}
.home {
background-color: #000;
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
}
.vite {
width: 50%;
}
</style>
这边要实现【动画衔接播放】
就是第一个左弹入的动画播放完，再播放下弹入（从上往下弹入）
代码【TODO】地方填写代码如下：
//设一个延迟触发器
setTimeout(() => {
//要先设置隐藏
vite.value.style.display = 'none'
animateCSS(vite.value, 'bounceInDown')
//开始播放动画就显示
vite.value.style.display = 'block'
}, timeout)
页面动画效果如下：
接下来我们要实现完整的动画效果
就是实现左、下、右和上四个方向弹入的动画
这边代码是 【viteAnime 方法】的所有内容，如下：
viteAnime = () => {
//第一次播放动画，左弹入（由左向右弹入）
animateCSS(vite.value, 'bounceInLeft')
vite.value.style.display = 'block'
//第二次播放动画，下弹入（由上往下弹入）
setTimeout(() => {
vite.value.style.display = 'none'
animateCSS(vite.value, 'bounceInDown')
vite.value.style.display = 'block'
}, timeout)
//第三次播放动画，右弹入（由右向左弹入）
setTimeout(() => {
vite.value.style.display = 'none'
animateCSS(vite.value, 'bounceInRight')
vite.value.style.display = 'block'
}, timeout * 2)
//第四次播放动画，上后入（从后边上来然后往前）
//这边最后一次改用上后入比较有结束的感觉
setTimeout(() => {
vite.value.style.display = 'none'
//backInUp是上后入动画的动画名字
animateCSS(vite.value, 'backInUp')
vite.value.style.display = 'block'
}, timeout * 3)
//最后一次上后入之后，配合后入动画，来个心跳做个完美Ending
setTimeout(() => {
vite.value.style.display = 'none'
//heartBeat是心跳动画的动画名字
animateCSS(vite.value, 'heartBeat')
vite.value.style.display = 'block'
}, timeout * 4)
},
接下来演示的是最后完成的动画效果：
是不是感觉还不错呀，嘻嘻 (♥◠‿◠)ﾉ
总结
这篇简单教学了如何使用Animate.css的简单功能使用
下一篇会延续本篇前端动画实现教学，将会有部分简单@keyframes动画教学
也会将本篇代码上传到Github进行公开
敬请期待