目录

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浏览器,下载个谷歌翻译插件就可以翻译成中文

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
这里有鱼汤1 分钟前
高手也容易忽略的 Python 命名空间与作用域
前端·后端·python
一只小灿灿2 分钟前
深入理解 CSS 选择器:从基础到高级的样式控制
前端·css
回村中年16 分钟前
浏览器 路由详解
前端
Mcband19 分钟前
主流程发起,去除子流程的时长计算问题
java·前端·算法
晓得迷路了19 分钟前
栗子前端技术周刊第 75 期 - Rspack 1.3、React 19.1、Astro 5.6...
前端·javascript·react.js
Kagol20 分钟前
TinyPro 后台管理系统从启动 ➡️ 使用 ➡️ 二开,看这一篇就够了!点赞、收藏⭐,不迷路!
前端·vue.js·nestjs
xiezhr31 分钟前
程序员为什么总是加班?
前端·后端·程序员
好_快35 分钟前
Lodash源码阅读-baseIsMatch
前端·javascript·源码阅读
excel35 分钟前
webpack 格式化模块工厂 第 一 节
前端
九筠38 分钟前
python网络爬虫开发实战之Ajax数据提取
前端·爬虫·ajax·网络爬虫