animate.css

引用animate.css官网的一句话:非常适合强调、主页、滑块和注意力引导提示。

在各大公司的官网上,不能像后台管理系统一样在一个页面无法展示所有模块,只能在页面最下放去放一个动画去引导用户,如下:这个向下的动态箭头就可以。

QQ录屏20230911103736

怎么用呢:

首先安装这个库:

复制代码
npm install animate.css --save

在main.js中添加

复制代码
import 'animate.css';

给下标图标元素添加一个类名

复制代码
class="animate__animated animate__bounce"

就可以实现如上的效果,

还有比较常用的卡片从底部滑到所在的位置的动画效果:

复制代码
class="animate__animated animate__slideInUp"

QQ录屏20230911103931

Js结合css

可以使用动态修改类名的方式实现:

复制代码
:class="change == 1 ? myStyle : animate__bounce"

可以使用结合js的方式来实现,如下可以检测动画在何时结束

复制代码
const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

element.addEventListener('animationend', () => {
  // do something
});

或更改其持续时间:

复制代码
const element = document.querySelector('.my-element');
element.style.setProperty('--animate-duration', '0.5s');

由于官网是英文,可以使用Edge浏览器,下载个谷歌翻译插件就可以翻译成中文

相关推荐
li357420 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj20 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel20 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel20 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵1 天前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld1 天前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷1 天前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军1 天前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离1 天前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库