首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我尝试用setTimeout()为它设置动画时,div并没有变小吗?

当你尝试使用setTimeout()为div设置动画时,div并没有变小的原因可能是因为setTimeout()函数只是在指定的时间间隔后执行一次代码,而不是连续执行代码来实现动画效果。setTimeout()函数只会在指定的延迟时间后执行一次代码,而不会在延迟期间连续执行代码。

要实现动画效果,你可以考虑使用其他方法,如CSS动画、JavaScript动画库或框架,或者使用requestAnimationFrame()函数来实现连续的动画效果。

CSS动画是一种通过在CSS样式中定义关键帧来实现动画效果的方法。你可以使用@keyframes规则来定义动画的关键帧,然后将动画应用到div元素上。这样,div就会根据你定义的关键帧逐渐变小。

JavaScript动画库或框架如GreenSock Animation Platform (GSAP)、jQuery等可以提供更多的动画效果选项和更好的性能。

另外,requestAnimationFrame()函数是浏览器提供的一种优化的动画效果实现方法。它会在浏览器的下一次重绘之前调用指定的回调函数,以确保动画的流畅性和性能。

综上所述,如果你想要实现div的动画效果,可以考虑使用CSS动画、JavaScript动画库或框架,或者使用requestAnimationFrame()函数来实现。以下是一些腾讯云相关产品和产品介绍链接地址,供你参考:

  1. 腾讯云CSS动画服务:提供了丰富的CSS动画效果和工具,帮助开发者轻松实现各种动画效果。产品介绍链接:https://cloud.tencent.com/product/css-animation
  2. 腾讯云Web+:提供了一站式的Web应用托管和部署服务,支持自动化构建、部署和扩展,可用于部署和管理动画效果相关的应用。产品介绍链接:https://cloud.tencent.com/product/tcb

请注意,以上仅为示例,实际选择产品时应根据具体需求进行评估和选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

requestAnimationFrame,终结定时器动画时代!

传统动画实现 在我们前端的传统中,在古老的ie称霸的年代,我们想要实现动画,必须要借助setTimeout或setInterval这两个函数,下面我们来思考一个问题: 我们让一个数字从0开始逐渐变大,到达...100在逐渐变小,如此往复 那么,传统的定时器的写法应该怎么写呢?...当然可行,完美?也还算完美,当突然发现新大陆以后,定时器便彻底被终结了,就比如,你用了苹果的Retina屏幕以后,发现再也回不去了是一个道理,你说1080p的屏幕完美?...,一些动画效果,完全由我们的显示器在短时间内不断播放一张张图片,当播放速率过快,便形成了动画效果,而我们的显示器在播放图片时,一般有一个播放的频率标准,我们叫做屏幕刷新率,即图像在屏幕上更新的速度,...也即屏幕上的图像每秒钟出现的次数,的单位是赫兹(Hz)。

1.4K20

如何实现一个丝滑的点击水波效果

本文Varlet组件库源码主题阅读系列第九篇,读完本篇,可以了解到如何使用一个div创建一个点击的水波效果。...Varlet组件库提供了一个使元素点击生成水波扩散效果的指令: 点击 图片 接下来就从源码角度看看它是如何实现的...,总体的流程为先创建一个div元素,然后设置的透明度0、初始位置、缩放、大小、背景颜色,然后添加为被点击元素的子元素,最后在20ms以后修改div的位置、缩放、透明度,只要设置的transation...setTimeout(task, 60) : task() } 先回顾一下创建水波的各个阶段的耗时,当我们第一次点击元素,等待60ms后会创建水波元素,然后再等待20ms后会开始进行水波的扩散效果,动画耗时...更多次重复触摸元素以此类推,会不断创建水波,水波动画结束后也会不断被删除。

59920
  • JavaScript实现爆炸碎片的 图片切换 效果

    解释 实现这个效果的思路就是,一个大的div元素,设置好一个背景,生成一定数量小的div元素,背景设置成同样的图片,但是每个小div元素的 background-position 属性值不同,整齐的覆盖在大的...2、鼠标移入时,让所有小div元素动起来,主要是改变小div元素的left、top、opacity、transform属性的值 具体实现的代码也并不多,下面是注释很详细的代码。 完整代码 <!...代表动画结束的 left 值 endLeft: maxW * j / C - (maxW - (maxW - W) / C - W) / 2, // endTop 代表动画结束的...setTimeout(function () { for (var i = 0; i < debrisAll.length; i++) { var l = posArr[...// 删除碎片 // 把ready 设置true,可以再次产生动画效果 // 改变 now的值,也就是改变当前要显示的图片 setTimeout(function

    1.9K30

    requestAnimationFrame & 定时器

    前面我们已经知道显示器一直在刷新图像,但是我们并没有感觉变化,是因为刷新频率很高,我们感觉不到而已。...setTimeout setTimeout设置一个时间间隔来不断的改变图像的位置,而达到动画效果。但是setTimeout在某低端机上会出现卡顿、抖动的现象。...setTimeout的执行只是在内存中对图像属性进行改变,这个变化必须等到屏幕下次刷新才会更新到屏幕上。如果两者步调不一致,就出现丢帧了。...开始执行并设置图像属性left= 1px; 第16.7ms:屏幕开始刷新,屏幕上的图像向左移动1px; 第20ms: setTimeout开始执行并设置图像属性left= 2px 第30ms: setTimeout...而requestAnimationFrame则完全不同,当页面处理未激活的状态下,该页面的屏幕刷新任务也会被系统暂停,因此跟着系统步伐走的requestAnimationFrame也会停止渲染,当页面被激活

    1.2K10

    商品添加到购物车动画getBoundingClientRect获取元素位置

    按钮缓慢弹出 当我们点击添加按钮的时候其他的内容会缓慢弹出,这个是靠css的动画实现的。 我们先将个数减少按钮和被选中物品个数num的left设为48px,使其被隐藏。...点击添加按钮选择物品个数大于0则让left变为0达到一个缓慢弹出的动画效果。 0}"> 令小球绝对定位这样可以改变的left和top。...动画实现思路:用户点击添加将一个小球的位置设置被点击元素的位置,且获取目的地位置(购物车位置),当小球抛出使其运动方式按照贝塞尔曲线过渡。...中的时间之所以设置1s,是因为css中规定的小球运动时间1s,所以在小球1s运动完以后会令恢复到原来的位置,你想想,小球一共就只有那么几个,如果不恢复的话下次用户点击了小球就不够啊… 总结 以上是饿了么购物车模块主页面的几个主要技术点

    1.6K20

    React Hooks踩坑分享

    我们组件第一次渲染的时候,从useState()拿到num的初始值0,当我们调用setNum(1),React会再次渲染组件,这一次num是1。...所以在num3,我们点击了展示现在的值按钮,就相当于: function Demo() { // ......setTimeout(() => { alert(3); }, 3000) // ... } 即便num的值被点击到了5。但是触发点击事件,捕获到的num值3。...只有当依赖数组中的依赖发生变化,才会被重新创建,得到最新的props、state。所以在用这类API我们要特别注意,在依赖数组内一定要填入依赖的props、state等值。...当我们函数本身只在需要的时候才改变。 在上面的例子中,我们无论点击多少次点击按钮,num的值始终1。这是因为useCallback中的函数被缓存了,其依赖数组空数组,传入其中的函数会被一直缓存。

    2.9K30

    阿里三面:灵魂拷问——有react fiber,为什么不需要vue fiber?

    以该树例: 在遍历到节点2发生了中断,我们保存对节点2的索引,下次恢复可以把下面的3、4节点遍历到,但是却无法找回5、6、7、8节点。...requesetIdleCallback是一个属于宏任务的回调,就像setTimeout一样。...fiber带给我们的——用户响应变快是可以理解的,但使用react fiber能带来渲染的加速?...动画变流畅的根本原因,一定是一秒内可以获得更多动画帧。但是当我们使用react fiber并没有减少更新所需要的总时间。...我把该项目的代码仓库 down下来,看了一下动画实现:组件动画效果并不是直接修改width获得的,而是使用的transform:scale属性搭配3D变换。

    79520

    ​Promise面试实战指北

    超时控制 背景 众所周知,fetch请求是无法设置超时时间的,因此我们需要自己去模拟一个超时控制。...转盘动画还未完成,请求结果已经拿到了,此时要等到动画完成再展示结果给用户。 转盘动画完成了,请求结果还未拿到,此时需要等待结果返回(可以设置请求超时时间)。...首先,必须等待所有Promise都resolve或reject,其次,如果有并发限制的话用它来做还需要分批请求,实际效率也会比较低,短木板效应很明显。...requestFns.push(createRequest(1000)); } concurrentRequest(requestFns, 3); 复制代码 管理全局loading态 背景 当我们一个页面或组件涉及到多个请求...在某些场景下,我们只希望用一个loading态去管理所有异步请求,当任一存在pending态的请求,展示全局loading组件,当所有请求都fulfilled或rejected,隐藏全局loading

    1K20

    2020已经过去五分之四了,你确定还不来了解一下JS的rAF?

    的实际常见用法类似于setTimeout,只是不需要设置时间间隔而已。...实际使用示例 「上才艺,E G M,E G M E G M E G M」 我们以在3000毫秒内移动1500px距离的动画为例 setTimeout的实现方式 以下代码通过setTimeout每10毫秒间隔时间改变一次元素的位置以实现元素的动画效果...distance = 1500; // 需要移动的距离 const timeCount = 3000; // 需要使用的时间 const intervalTime = 10; // 设置间隔时间10ms...setTimeout通过设定一个时间间隔来不断的更新屏幕图像,从而完成动图。 的优点是可控性高,可以进行编码式的动画效果实现。...「浏览器不能完美执行:」 当动画使用10ms的settimeout绘制动画,您将看到一个时序不匹配,如下所示。 ?

    1.1K30

    🤔听说这个动效可以玩一天?

    scale,缩放详细: 被选中,先稍微多放大一些,再缩小选中的放大状态保持; 未选中,先稍微多缩小一些,再放大为未选中的正常状态保持; 「滑块」就比较简单了,单纯的静态样式加上点以后滑动到对应按钮下方...勉勉强强吧 按钮 按钮呢因为他本身没有轮廓样式,所以我是直接把理解「均分了容器的两个透明盒子」,然后内部元素不确定,用「弹性布局」让按钮的子元素都居中就行。... 按钮1 按钮2 /* 按钮选中缩放动画...当点击按钮1,将原点设置按钮2半侧的某个点,反之亦然 「嗦干酒干」,这里在下用到的还是css变量的方法 #btnWrapper { /* ...其他属性 */ /* transform-origin...-8 : 8}deg`); // 按钮1-8°,按钮28° wrapper.className = 'rotateWrap'; // 点击添加类名 setTimeout

    90110

    CSS calc() 使用指南

    CSS calc() 使用指南 你听说过或使用过 CSS 的 calc() 函数?也许你听说过,但从未尝试过,或者尝试过使用它,但在使用过程中遇到了一些问题。这篇指南可以帮助你。...在本文中,我们将研究 CSS calc() 函数,为什么很有用,以及如何在项目中使用它。 1. 什么是 CSS calc() 函数? calc() 函数允许在指定 CSS 属性值执行计算。...,当我们增加屏幕大小或在桌面视图中恢复正常。...这是用来指定动画开始前的延迟时间。 6. CSS calc() 的浏览器兼容性 虽然 calc() 在 CSS 中是一个有用的函数,但它只有在与我们的浏览器兼容才有用。...它们包括: 当我们处理 CSS 变量 为了得到一个新的值 用于不同单元之间的计算,这是预处理器无法做到的 定位 调整我们网站的结构和其他元素 当我们想避免重复做相同的计算 我们在本文中介绍的大多数示例都属于上述类别

    1.7K40

    jQuery框架实现元素显示及隐藏动画【附案例分析】

    一、默认方式显示和隐藏 在默认方法下显示元素的方法是 show([speed,[easing],[fn]]) 其中的参数含义: speed:动画的速度。...* swing:动画执行时效果是 先慢,中间快,最后又慢。* linear:动画执行时速度是匀速的 fn:在动画完成执行的函数,每个元素执行一次。...同时在这里提醒一点就是,以上的三个参数是可有可无的,如果不对其进行设置,那么将以默认值执行。...,再定义一个方法用于元素隐藏?..."#showDiv").toggle("slow","linear"); 默认方式下实现效果如图: 二、滑动方式显示和隐藏 从名字上我们应该也能区分出,滑动方式和默认方式的不同之处其实就是显示和隐藏动画不一样罢了

    6.4K20

    前端二面必会面试题及答案_2023-03-15

    当我最外层的节点添加点击事件,那么里面的ul、li、a的点击事件都会冒泡到最外层节点上,委托代为执行事件 1 2 <li...当我们查找一个变量,如果当前执行环境中没有找到,我们可以沿着作用域链向后查找作用域链的创建过程跟执行上下文的建立有关....作用域可以理解变量的可访问性,总共分为三种类型,分别为:全局作用域函数作用域块级作用域...当指定的时间低于该时间,浏览器会用最小允许的时间作为setTimeout的时间间隔,也就是说即使我们把setTimeout的延迟时间设置0,实际上可能为 4毫秒后才事件推入任务队列。...要是当前代码耗时很长,有可能要等很久,所以并没有办法保证,回调函数一定会在setTimeout()指定的时间执行。...在 requestAnimationFrame 之前,主要借助 setTimeout/ setInterval 来编写 JS 动画,而动画的关键在于动画帧之间的时间间隔设置,这个时间间隔的设置有讲究,一方面要足够小

    1.3K50

    面试分享:阿里前端面试总结

    一个固定定位元素不会保留原本在页面应有的空隙。 Flex布局用的多? 因为项目考虑兼容 IE9 所以直接说用的不多 移动端适配怎么做的?...let ES6 新添加申明变量的命令,类似于 var,但是有以下不同: var 声明的变量,其作用域该语句所在的函数内,且存在变量提升现象 let 声明的变量,其作用域该语句所在的代码块内,不存在变量提升...(这个就不知道了) 当我们执行代码,我们可以简单的理解新变量分配一块儿内存,命名为a,并赋值2,但在运行的时候编译器与引擎还会进行两项额外的操作:判断变量是否已经声明: 首先编译器对代码进行分析拆解...当 ctrl+f5 强制刷新网页,直接从服务器加载,跳过强缓存和协商缓存; 当 f5 刷新网页,跳过强缓存,但是会检查协商缓存; 强缓存 Expires(该字段是 http1.0 的规范,值一个绝对时间的...GMT 格式的时间字符串,代表缓存资源的过期时间) Cache-Control:max-age(该字段是 http1.1 的规范,强缓存利用其 max-age 值来判断缓存资源的最大生命周期,的值单位

    64130

    仿抖音视频全屏播放&滑动切换

    并没有自动进行全部视频内容的下载,这样的策略实际有利于节约用户宽带造成不必要的请求。...假如不设置,默认值就是浏览器定义的了 (即,不同浏览器会选择自己的默认值),即使规范建议设置 metadata。...,动画的实现主要有requestAnimationFrame/setTimeout等传统的方法实现,也有css3新增的transition/animation过渡效果和动画实现本实例中为了低端安卓机的流畅性...-this.clientHeight : this.clientHeight; // 动画结束处理 去除动画参数,进行隐式界面切换 setTimeout(() => { //...同时在判断动画结束时间这块,本实例使用了setTimeout实现,该操作是不准确的,建议使用transitionend事件进行实现。

    4.1K20

    浏览器中实现JavaScript计时器的4种创新方式

    选项卡未聚焦不会暂停。 使用CSS动画处理时间事件(animationiteration) 如果创建带有无限动画div。...无需担心调用时卡住,这些调用将在再次显示选项卡立即运行。 从 DOM 中删除隐藏的 div ,将自动进行清理。例如,如果你有一个可渲染时间的 React 组件,则无需在卸载做任何事情。...优点 即使 SVG display: none;也会生效。 从 DOM 中删除 SVG 自动停止。 直到整页加载才开始渲染。 选项卡聚焦自动暂停。...Web Animations API 允许你在 JavaScript 中 DOM 元素设置动画。 有趣的是,你可以使未渲染完的元素具有动画效果!...这是替代 setTimeout 的实现: function ownSetTimeout(callback, duration) { const div = document.createElement

    1.9K30

    dom更新到底在javascript事件循环的哪个阶段?「前端每日一题v22.11.17」

    我写了以下的代码,在异步微任务和宏任务之间加一个dom的更新操作 setTimeout(() => {alert('暂停点alert');console.log('setTimeout done')},...0) document.getElementsByTagName('div')[0].innerHTML = 'FE情报局' new Promise((resolve) => {resolve()})....then(() => {console.log('promise done')}) 其中我在宏任务开始加了一个alert,用来阻塞js,观测页面上是否已经有了「FE情报局」,当我满怀信心的按下的时候...如果1秒你的刷新率只有10,你就会发现自己看的动画跟ppt一样,十分卡顿 当前主流的浏览器刷新频率60赫兹,也就是说刷新一次所需要的时间是1000/60=16.6毫秒,根据UI线程和js线程互斥的关系...,我们可以理解浏览器要在这16.6毫秒以内完成js脚本和浏览器渲染 回到正题 到这里就很好理解了,我们在刚开始执行那段js代码的时候,虽然在元素下看dom已经更新到dom树上了,但是浏览器并没有刷新,

    77830

    一步步教你用实现HTML5 SVG动画效果

    本文介绍了HTML5 SVG中的circle 元素,的stroke属性,以及如何使用CSS变量以及用 Vanilla JavaScript 它们设置动画。...注意:访问Awwwards(https://www.awwwards.com/)网站,你需要把浏览器宽度设置1024px或更高的才能更好的下查看动画笔记显示。 ?...列出项元素及其直接子元素:.circle, .percent 和 .label .circle_svg是一个SVG元素,包含两个 元素。 第一个是要填充的路径,第二个用来动画作准备。 ?...它最多可能需要四个值: 当它被设置唯一的整数( stroke-dasharray:10 ),破折号和间隙具有相同的大小; 对于两个值( stroke-dasharray:10 5 ),第一个应用于破折号...当 --dashoffset 变量被 setTimeout更新,将发生动画: 1const displays = document.querySelectorAll('.note-display'

    2.5K20
    领券