文章目录

前言
一、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><linkrel="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)//对元素节点添加classnode.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)//最后一次上后入之后，配合后入动画，来个心跳做个完美EndingsetTimeout(() => {vite.value.style.display = 'none'//heartBeat是心跳动画的动画名字animateCSS(vite.value, 'heartBeat')vite.value.style.display = 'block'}, timeout * 4)},

接下来演示的是最后完成的动画效果：

是不是感觉还不错呀，嘻嘻 (♥◠‿◠)ﾉ

总结

这篇简单教学了如何使用Animate.css的简单功能使用

下一篇会延续本篇前端动画实现教学，将会有部分简单@keyframes动画教学

也会将本篇代码上传到Github进行公开

敬请期待

【Vue项目实战】Vue3动画神操作！教你如何实现PPT一样的动画效果！相关推荐

Vue项目实战 —— 哔哩哔哩移动端开发—— 第一篇
目录前言完效果图 : 登录含签权注册带正则个人中心下拉加载更多主页修改个人中心视频播放加关注+收藏评论盖楼A回复B B回复C C回复A类似项目开始封装登录.注册封装登录从零到一 ...
Vue项目实战-vue2(移动端)
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) ...
vue 动态添加class_前端开发：Vue项目实战-Music
大家好,我来了,本期为大家带来的前端开发知识是"前端开发:Vue项目实战-Music",有兴趣做前端的朋友,和我一起来看看吧! 主要内容项目环境搭建路由导航实现 ListVie ...
vue 将字符串最后一个字符给替换_前端开发：Vue项目实战-Music
大家好,我来了,本期为大家带来的前端开发知识是"前端开发:Vue项目实战-Music",有兴趣做前端的朋友,和我一起来看看吧! 主要内容项目环境搭建路由导航实现 ListVie ...
【VUE项目实战】68、使用pm2管理项目
接上篇<67.上线-开启gzip和配置HTTPS服务> 上一篇我们学习了如何开启gzip配置来减少文件访问体积,并配置HTTPS服务.本篇我们讲解一下如何使用pm2管理项目. 本篇是该系列 ...
【VUE项目实战】32、权限管理-实现角色列表
接上篇<31.权限管理-实现权限列表> 上个阶段我们完成了权限管理模块,本篇我们来介绍用户.角色和权限三者的关系,并完成角色管理列表模块. 一.权限管理业务分析通过权限管理模块,控制不同 ...
【VUE项目实战】64、CND优化ElementUI以及首页内容定制
接上篇<63.指定打包入口及加载外部CDN资源> 上一篇我们为开发模式与发布模式制定不同的打包入口,然后为项目加载外部CDN资源.本篇我们来学习通过CND优化ElementUI的打包,以及 ...
【VUE项目实战】59、订单的物流信息查询功能
接上篇<58.订单修改收货地址的功能> 上一篇我们完成了订单列表的修改收货地址功能,本篇我们来实现订单的物流信息查询功能. 一.要实现的效果我们要实现点击操作列的"物流进度&q ...
【VUE项目实战】56、商品添加功能（六）-提交添加的商品
接上篇<55.商品添加功能(五)-商品内容模块> 上一篇我们完成了商品内容编辑模块的开发,也即是完成了商品所有的信息编辑,本篇我们就来开发提交商品所有信息到后台的功能. 一.要实现的效果 ...
【VUE项目实战】54、商品添加功能（四）-商品图片上传模块
接上篇<53.商品添加功能(三)-商品参数及属性模块> 上一篇我们完成了商品参数和商品属性面板的开发,本篇我们来完成商品图片上传模块的开发. 一.要实现的效果我们在商品图片页签,需要放置 ...

【Vue项目实战】Vue3动画神操作！教你如何实现PPT一样的动画效果！