AutoAnimate - 无需任何配置,一行代码自动为元素添加优雅的过渡动画,可以搭配 Vue / React 和 Sevelt 使用

AutoAnimate - 无需任何配置,一行代码自动为元素添加优雅的过渡动画,可以搭配 Vue / React 和 Sevelt 使用

这个动画库只要一行代码就可以自动在我们的组件中添过渡动画,为什么这么省事高效呢?

AutoAnimate 是一个无需任何配置,自动为我们开发的 Web 项目添加平滑过渡动画的 JavaScript 工具库。AutoAnimate 和之前推荐的一些 js 动画库相比,最大的优势就是完全不需要配置,会自动添加对应的动画,动画效果很顺滑,对增强产品的用户体验很有帮助。

AutoAnimate 官网

下面我来详细介绍这款 js 动画库。

在 UI 交互中,一个组件的位置、显示隐藏、大小等状态发生改变,如果没有过渡动画就会像下面这样:

  • 点击按钮打开一个弹框,会突然闪现;
  • 删除一个元素,该元素立刻消失;
  • 对列表进行排序时,很难察觉排序后的区别

过渡动画示例

这些交互如果没有过渡动画,除了会给用户非常生硬突兀的感受外,更严重的是由于用户没有察觉变化,会认为没有操作成功而导致误操作。因此很多 UI 组件都做了动画,来提高用户使用体验,但这些小的交互动画的实现其实并不容易,过渡动画涉及到各种参数以及生命周期,我以前自己实现进入和退出动画,都会花费大量时间来调参数,非常费时费力。

这个动画库我是在阮一峰老师的周刊上看到的,因为我之前也推荐过 Anime.js 、GSAP、SpriteJS这样的动画库,所以我第一反应是 AutoAnimate 可能也是类似的效果,但经过了解,我发现我还是肤浅了,这个动画库最关键的就是 “auto”,真的是只需要一行代码,就可以全自动给 web 应用加过渡动画,看到效果后,我裂开了,真牛。

安装使用

支持 npm / yarn / pnmp 安装,下面是 npm 安装的方法:

简单代码例子

以 Vue3 项目为例,使用时,我直接按照自己的想法写组件,完全不需要考虑动画。比如下面的代码是点击「展开段落」按钮,段落 DOM 节点会显示,我只需提供父节点,剩下的加入动画工作会自动完成!

运行上面代码,效果是段落会以下拉动画的方式平滑渐出,非常顺滑。

排序动画

自动加动画原理

AutoAnimate 加动画的原理也很简单,监听绑定的 DOM 节点里 DOM 结构变化,自动添加对应的过渡动画:

  • 增加子节点 => 渐入动画;
  • 删除子节点 => 渐出动画;
  • 移动子节点 => 交换位置动画

这些都是自动添加的效果,如果想要进一步定制动画,也支持配置。官网给出很多代码示例,可以去参考来写。有个这个库,其实很多排序、轮播图这样的效果,实现起来非常容易。

官网丰富的代码例子

AutoAnimate 这个项目的大部分代码由开发者 Justin Schroeder 编写,是一个基于 MIT 开源协议的开源项目,任何人都可以免费下载来使用,当然也可以用于商业项目。

原文链接:https://www.thosefree.com/auto-animate

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/81495.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis---第三篇

系列文章目录 文章目录 系列文章目录一、redis集群方案二、redis 主从复制的核心原理一、redis集群方案 主从 哨兵模式: sentinel,哨兵是 redis 集群中非常重要的一个组件,主要有以下功能: 集群监控:负责监控 redis master 和 slave 进程是否正常工作。 消息通知:如果某…

UINT64整型数据在格式化时使用了不匹配的格式化符%d导致其他参数无法打印的问题排查

目录 1、问题描述 2、格式化函数内部解析待格式化参数的完整机制说明 2.1、传递给被调用函数的参数是通过栈传递的 2.2、格式化函数是如何从栈上找到待格式化的参数值,并完成格式化的? 2.3、字符串格式化符%s对应的异常问题场景说明 2.4、为了方便…

鸟哥的LInux私房菜 基础学习篇 第四版 学习笔记

第一章 目前被称为纯种的Unix指的是System V以及BSD这两套软件。 要实现多任务的环境,除了硬件(主要是CPU)需要能够具有多任务的特性外,操作系统也需要支持这个功能。 如果网络有问题时,去/var/log目录查日志。 第二…

腾讯轻联:带你创造属于自己的AI小助手

陈老老老板🤴 🧙‍♂️本文专栏:生活(主要讲一下自己生活相关的内容)生活就像海洋,只有意志坚强的人,才能到达彼岸。 🧙‍♂️本文简述:参加腾讯全球数字生态大会,了解到腾讯轻联企业…

易基因直播预告|细菌微生物基因表达调控表观研究易基因科技

大家好,这里是专注表观组学十余年,领跑多组学科研服务的易基因。 DNA甲基化是在半个多世纪前在细菌中发现的。DNA碱基可以作为一个表观遗传调节因子——也就是说,它可以赋予相同的基因序列不同的和可逆的调控状态。在真核生物中,…

C++ -- 学习系列 std::array 容器

1. std::array 是什么? array 容器是 C 11 标准中新增的序列容器,简单地理解,它就是在 C 普通数组的基础上,添加了一些成员函数和全局函数。在使用上,它比普通数组更安全,且效率并没有因此变差。 与数组一…

Python模糊匹配(fuzzywuzzy package)

from fuzzywuzzy import fuzz from fuzzywuzzy import process1.关键方法说明 ratio 要字符完全一致,匹配精度才较高partial_ratio 要字符部分一致,匹配精度较高token_sort_ratio 即使字符顺序不一致,也能较好匹配token_set_ratio 即使字符顺…

【环境配置】基于Docker配置Chisel-Bootcamp环境

文章目录 Chisel是什么Chisel-Bootcamp是什么基于Docker配置Chisel-Bootcamp官网下载Docker安装包Docker换源启动Bootcamp镜像常用docker命令 可能产生的问题 Chisel是什么 Chisel是Scala语言的一个库,可以由Scala语言通过import引入。 Chisel编程可以生成Verilog代…

深入了解OSI模型:计算机网络的七大层次

目录 OSI模型 物理层 数据链路层 网络层 传输层 会话层 表示层 应用层 OSI模型 OSI模型是一个网络通信的概念模型,用于描述计算机网络中各个不同层次之间的通信和功能。它将网络通信分为七个不同的层次,每个层次负责不同的任务,使得网…

paddle框架的使用

Paddle是由百度开发的深度学习框架,支持声明式和命令式编程风格。它还支持深度神经网络的超大规模训练和神经架构的自动设计。您可以使用 Paddle 构建用于训练的神经网络模型,具体步骤如下: 导入桨模块和其他必要的模块,如numpy&…

golang 运算符

目录 1. golang 运算符1.1. Types of Operators1.2. Bitwise Operators (位运算符)1.3. Logical Operators (逻辑运算符)1.4. Arithmetic Operators (算术运算符)1.5. Assignment Operators (赋值运算符)1.6. Comparison Operators (比较运算符) 1. golang 运算符 1.1. Types …

c语言练习58:⾃定义类型:结构体

⾃定义类型:结构体 结构体的概念 结构是⼀些值的集合,这些值称为成员变量。结构的每个成员可以是不同类型的变量。 结构体是一个种自定义的数据类型,它可以由很多个默认数据类型组成。它主要用于描述复杂场景下的变量。 例如,想…

文件上传漏洞~操作手册

目录 上传文件一般过滤方式 客服端校验 服务端校验 黑白名单机制 常规文件上传漏洞绕过 客户端绕过 1.游览器禁用JavaScript 2.正常burp suite抓包改包 服务端绕过 1.Content-Type绕过 2.黑名单绕过 1)命名规则绕过 2)大小写绕过 3&#x…

vue入门及小项目小便签条

vue 框架:是一个半成品软件,是一套可重用的,通用的,软件基础代码模型。基于框架进行开发,更加快捷 ,更加高效 v-bind为HTML标签绑定属性值,如设置href,css样式等 v-model在表单元素上创建双向数…

C++ 太卷,转 Java?

最近看到知乎、牛客等论坛上关于 C 很多帖子,比如: 2023年大量劝入C 2023年还建议走C方向吗? 看了一圈,基本上都是说 C 这个领域唯一共同点就是都使用 C 语言,其它几乎没有相关性。 的确是这样,比如量化交…

c++模版元编程-函数模版

C模板元编程(Template Metaprogramming,TMP)是一种使用C模板语言特性进行编程的技术,主要用于在编译期间进行计算和类型推导。通过使用TMP,可以在编译期间生成代码,从而实现更高效和更灵活的程序设计。 TM…

VM ware中Linux连网

在公司时,想搭建一下docker,结果发现连不上网,那就自己动手操作一下 一、联网配置 1.1 ping 发现ping不通,说明虚拟机此时无法与外界网络互连,需要修改设置联网 1.2 ifconfig查看网络配置 注意第一行显示的是ens33还是ens32,后面配置会用到 1.3 获取ro…

达梦数据库如何收集统计信息?

1、收集shema统计信息 CALL DBMS_STATS.GATHER_SCHEMA_STATS(大写的用户名,100,TRUE,FOR ALL COLUMNS SIZE AUTO); 2、收集表的统计信息 CALL DBMS_STATS.GATHER_TABLE_STATS(大写的用户名, 大写的表名,NULL,100,TRUE,FOR ALL COLUMNS SIZE AUTO); 3、收集索引的统计信息 CALL…

WebGL模型视图投影矩阵

WebGL透视投影_山楂树の的博客-CSDN博客中的PerspectiveView代码一个问题是,我们用了一大段枯燥的代码来定义所有顶点和颜色的数据。示例中只有6个三角形,我们还可以手动管理这些数据,但是如果三角形的数量进一步增加的话,那可真就…

如何在 Excel 中求平方根

需要在 Excel 中求一个数字的平方根吗?使用几个内置的 Excel 函数和公式可以轻松计算平方根。在本分步指南中,您将学习在 Excel 中计算平方根的 5 种不同方法,包括使用 SQRT 函数、POWER 函数、指数公式、VBA 代码和 Power Query。跟随教程&a…