原生js的animate()方法详解

1.介绍

Element 接口的 animate() 方法是创建一个新的 Animation 的便捷方法,将它应用于元素,然后运行动画。它将返回一个新建的 Animation 对象实例。
同时通过Element.getAnimations() 方法可获取元素所有的Animation实例。

2.语法

Element.animate(keyframes, options)

3.参数

keyframes:关键帧对象数组,或一个关键帧对象(其属性为可迭代值的数组)。作用类似于css animation的keyframes。

const keyframes1 = [{ marginLeft: '0', backgroundColor: '#4cdfec' },{ marginLeft: '300px', backgroundColor: '#e46b35' }
] 
const keyframes2 = {marginLeft: ['0', '300px'],backgroundColor: ['#4cdfec', '#e46b35']
} 

options:代表动画持续时间的整数(以毫秒为单位),或者包含多个属性的对象。

  • id: 可选,在animate()里可作为唯一标识的属性:一个用来引用动画的字符串

  • delay: 动画开始延迟的毫秒数。默认为 0

  • direction: 动画是向前运行( normal)、向后运行( reverse),在每次迭代后切换方向( alternate),还是向后运行并在每次迭代后切换方向( alternate-reverse)。默认为"normal"

  • duration: 动画每次迭代完成所需的毫秒数。默认为 0,但请记住,如果该值为 0,您的动画将不会运行。

  • easing: 动画随时间变化的速率。接受,例如"linear"、“ease-in”、“step-end"或"cubic-bezier(0.42, 0, 0.58, 1)”。默认为"linear"

  • endDelay: 动画结束后延迟的毫秒数。这主要在根据另一个动画的结束时间对动画进行排序时使用。默认为 0

  • fill: 指定动画效果是否应在播放之前生效( backwards)、在动画播放完成后保留( forwards) 还是"both"。默认为"none"

  • iterations: 动画应重复的次数。默认为1,Infinity以使其在元素存在时重复

  • iterationStart: 描述动画应在迭代中的哪个点开始。例如,0.5表示在第一次迭代的中途开始,设置此值后,具有 2 次迭代的动画将在第三次迭代的中途结束。默认为0.0

  • composite: 确定如何在此动画和其他未指定其自身特定复合操作的单独动画之间组合值。默认为 replace

  • iterationComposite: 确定此动画中值如何从迭代构建到迭代

  • pseudoElement: 包含伪类选项器的字符串,例如"::before"。如果存在,则效果将应用于目标元素的伪元素而不是目标元素本身

const options = {id: 'abc',delay: 1000,duration: 3000,easing: 'ease-in',iterations: 'Infinity'
}

4.Animation的属性

在这里插入图片描述

  • finished:动画完成后返回的Promise
  • ready:动画开始时返回的Promise
  • oncancel:动画取消事件
  • onfinish:动画完成事件
  • onremove:动画移除事件
  • playState:动画播放状态
  • id:options中定义的动画id

5.Animation的方法

在这里插入图片描述

  • cancel():取消动画
  • finish():完成动画
  • pause():暂停动画
  • play():播放动画
  • reverse(): 反转动画

6.浏览器兼容性

该API较新,属于实验特性,对传统的浏览器支持并不友好,所有IE浏览器、低版本浏览器不支持。
在这里插入图片描述

7.报错汇总

  1. Failed to execute ‘animate’ on ‘Element’: Partial keyframes are not supported.
    原因:chrome浏览器系统为32位。
    解决:换成64位。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【PLC GX Works2】创建一个工程

PLC GX Works2软件安装 https://www.jcpeixun.com/software/375 程序编写 1、工程中找到新建 2、新建 3、导航栏中选择第三行第一个,是全局软元件注释 4、修改软元件名x0为点动按钮,y1为电机,之后关闭即可。 5、左母线,右…

Spring Security 的身份验证绕过漏洞CVE-2023-34035

文章目录 0.前言漏洞漏洞介绍描述 1.参考文档2.基础介绍2.1 组件简介:2.2 漏洞简介: 3.解决方案3.1. 升级版本 0.前言 背景:公司收到关于 Spring Security 的一个身份验证绕过漏洞的通知,该漏洞被标识为 CVE-2023-34035 漏洞 高 …

【大数据开发技术】实验01-Hadoop安装部署

文章目录 Hadoop安装部署一、实验目标二、实验要求三、实验内容四、实验步骤 Hadoop安装部署 虚拟机数量:3 系统版本:Centos 7.5 Hadoop版本: Apache Hadoop 2.7.3 主节点信息: 操作系统:CentOS7.5 软件包位置&…

【机器学习】回归问题实例(李宏毅老师作业1)

文章目录 任务介绍完成和调参 任务介绍 问题描述 给出美国某一州过去3天的调查结果,然后预测第3天新检测阳性病例的百分比。 数据相关特征feature States(34, encode to one-hot vectors) 34个州COVID-like illness&#xff0…

2101. 引爆最多的炸弹;752. 打开转盘锁;1234. 替换子串得到平衡字符串

2101. 引爆最多的炸弹 核心思想:枚举BFS。枚举每个炸弹最多引爆多少个炸弹,对每个炸弹进行dfs,一个炸弹能否引爆另一个炸弹是两个炸弹的圆心距离在第一个炸弹的半径之内。 752. 打开转盘锁 核心思想:典型BFS,就像水源扩散一样&a…

打造本地紧密链接的开源社区——KCC@长沙开源读书会openKylin爱好者沙龙圆满举办...

2023年9月9日,由开源社联合 openKylin 社区举办的 KCC长沙开源读书会&openKylin 爱好者沙龙,在长沙圆满举办。这是 KCC长沙首次正式进入公众视野,开展开源交流活动,也是 openKylin 社区长沙首场线下沙龙。长沙地区及其周边的众…

期刊目录解析 | 慎投!又2本“On Hold”SCI期刊被踢!

科睿唯安官方目前对SCI期刊的管理可以说是相当严格的,每个月都会出评估报告,如果任何一本期刊有问题,就会先被“On Hold”,这代表需要重新评估是否符合SCI标准,有可能直接被剔除。 此前,小编也为大家统计了…

Pdf文件签名检查

如何检查pdf的签名 首先这里有一个已经签名的pdf文件&#xff0c;通过pdf软件可以看到文件的数字签名。 图1为签名后的文件&#xff0c;图2为签名后文件被篡改。 下面就是如何代码检查这里pdf文件的签名 1.引入依赖 <dependency><groupId>org.projectlombok<…

C语言 coding style

头文件 The #define Guard #define的保护文件的唯一性&#xff0c;防止被多重包含 格式 : <PROJECT>_< FILE>_H_ PROJECT : XS FILE : MV_CTR 头文件的包含顺序 C System FilesOther LibrariesUser LibraryConditional include 作用域 局部变量 -变量定义时需要…

ElementUI之登录与注册

目录 一.前言 二.ElementUI的简介 三.登录注册前端界面的开发 三.vue axios前后端交互--- Get请求 四.vue axios前后端交互--- Post请求 五.跨域问题 一.前言 这一篇的知识点在前面两篇的博客中就已经详细详解啦&#xff0c;包括如何环境搭建和如何建一个spa项目等等知识…

#循循渐进学51单片机#指针基础与1602液晶的初步认识#not.11

1、把本节课的指针相关内容&#xff0c;反复学习3到5遍&#xff0c;彻底弄懂指针是怎么回事&#xff0c;即使是死记硬背也要记住&#xff0c;等到后边用的时候可以实现顿悟。学会指针&#xff0c;就是突破了C语言的一道壁垒。 2&#xff0c;1602所有的指令功能都应用一遍&#…

网络编程.

网络编程就相当于通过网络进行数据的传输&#xff0c;可以传给别人&#xff0c;不仅限于自己&#xff1b; 常见软件架构 BS优点 1.不需要开发客户端&#xff0c;只需要页面服务器 2.不用下载 缺点 如果应用过大 cs优点 1.画面精美 缺点 1.客户端&#xff0c;服务端都要…

【C++】静态成员函数 ( 静态成员函数概念 | 静态成员函数声明 | 静态成员函数访问 | 静态成员函数只能访问静态成员 )

文章目录 一、静态成员函数简介1、静态成员函数概念2、静态成员函数声明3、静态成员函数访问4、静态成员函数只能访问静态成员 二、代码示例 - 静态成员函数 一、静态成员函数简介 1、静态成员函数概念 静态成员函数归属 : 在 C 类中 , 静态成员函数 是一种 特殊的函数 , 该函数…

Python教程(14)——Python函数的入门学习

函数是什么&#xff1f;在编程中&#xff0c;函数是一段可重用的代码块&#xff0c;用于完成特定任务或执行特定操作。它可以接输入参数并返回一个值或执行一系列操作。函数可以帮助程序员将代码模块化&#xff0c;提高代码的可读性和可维护性。 函数通常包括以下组成部分&…

基于Java的高校竞赛管理系统设计与实现(亮点:发起比赛、报名、审核、评委打分、获奖排名,可随意更换主题如蓝桥杯、ACM、王者荣耀、吃鸡等竞赛)

高校竞赛管理系统 一、前言二、我的优势2.1 自己的网站2.2 自己的小程序&#xff08;小蔡coding&#xff09;2.3 有保障的售后2.4 福利 三、开发环境与技术3.1 MySQL数据库3.2 Vue前端技术3.3 Spring Boot框架3.4 微信小程序 四、功能设计4.1 主要功能描述4.2 系统角色 五、系统…

文心一言 VS 讯飞星火 VS chatgpt (98)-- 算法导论9.3 4题

四、用go语言&#xff0c;对一个包含n个元素的集合&#xff0c;假设一个算法只使用比较来确定第i小的元素&#xff0c;证明:无需额外的比较操作&#xff0c;它也能找到第 i-1 小的元素和第 n-i大的元素。 文心一言&#xff1a; 在这个问题中&#xff0c;我们要使用一个称为&q…

ArrayList 的自动扩容机制

触发扩容 ArrayList 是一个数组结构的存储容器&#xff0c;默认情况下&#xff0c;数组的长度是 10 当然我们也可以在构建 ArrayList 对象的时候自己指定初始长度。随着在程序里面不断的往 ArrayList 中添加数据&#xff0c;当添加的数据达到 10 个的时候&#xff0c;ArrayLis…

7.2、如何理解Flink中的水位线(Watermark)

目录 0、版本说明 1、什么是水位线&#xff1f; 2、水位线使用场景&#xff1f; 3、设计水位线主要为了解决什么问题&#xff1f; 4、怎样在flink中生成水位线&#xff1f; 4.1、自定义标记 Watermark 生成器 4.2、自定义周期性 Watermark 生成器 4.3、内置Watermark生…

在Kubernetes上安装和配置Istio:逐步指南,展示如何在Kubernetes集群中安装和配置Istio服务网格

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

爬虫实践-豆瓣读书Top250

爬虫学习与实践 一、爬虫介绍二、爬虫原理TCP3次握手&#xff0c;4次挥手过程 三、页面解析之数据提取四、正则表达式五、实践1. 抓取百度贴吧2. 拉钩招聘网 六、 进阶版 一、爬虫介绍 网络爬虫&#xff0c;其实叫作网络数据采集更容易理解。就是通过编程向网络服务器请求数据…