社区首页 >问答首页 >如何在页面中添加元素时运行CSS动画?

如何在页面中添加元素时运行CSS动画?
EN

Stack Overflow用户
提问于 2019-06-18 12:55:38
回答 2查看 42关注 0票数 0

我注意到,当angular通过添加大量元素来更新页面时,甚至CSS动画也会停止运行。我在这里创建了一个stackblitz https://stackblitz.com/edit/angular-fefvpa来突出这个问题。当你点击“添加元素”按钮时,红色方块会停止移动大约半秒。我能做些什么来规避这个问题呢?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-18 13:12:06

你真的无法避免这一点。

你附加了一千个孩子,这是一个相当重要的过程。

这种操作应该在小块中完成,something like this

Javascript是一种单读脚本语言,这意味着大多数操作都是阻塞的。当你一个接一个地做的时候,当然,它是很漂亮的。但是,当您同时运行一千个操作时(好吧,一个接一个地运行,没有任何中断),您就会面临这类问题。尤其是使用DOM操作时。

票数 0
EN

Stack Overflow用户

发布于 2019-06-18 13:12:17

我能想到的一个解决方案可能会对你有所帮助,那就是在动画中使用transform: translateX而不是left

你的动画看起来就像

代码语言:javascript
代码运行次数:0
复制
@keyframes mymove {
  from {transform: translateX(0)}
  to {transform: translateX(400px)}
}

您还可以向#box本身添加transform:translateZ(0)

动画将使用较少的‘图形处理器’,通过添加transform:translateZ(0),您也将使浏览器使用更多的图形处理器用于该动画。因此,它可能会运行得更流畅。

我在我的电脑上测试了它,当添加项目时它不再“冻结”。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56649679

复制
相关文章
html页面添加元素
Title table,td,th{ border: 1px solid slateblue ; } div{ vertical-align: center; text-align: center; } $(function (){ var $delete=function (){ var $parent = $(this).parent().parent();
await
2021/09/23
6.4K0
css实现页面加载动画
一.代码 <div id="loading"> <div id="loader-wrapper"> <div id="loader"></div> <div class="loader-section section-left"></div> <div class="loader-section section-right"></div> <div class="load_title">正在加载中...........</div>
小小咸鱼YwY
2020/08/11
3.8K0
给单元素艺术添加动画
原文:Animating Single Div Art 翻译:nzbin 导读:学习工具的最好的方法就是尝试新技术,本文通过“单元素艺术”介绍了 CSS 变量的使用以及给单元素添加动画的几种方法。通过学习作者编写的复杂的“单元素”示例,相信你对 CSS 变量以及 CSS 动画会有一个深刻的认识。 如果你深入挖掘你的工具,你可以使用最基本的 HTML 做一些令人称奇的东西。我对 Lynn Fisher 以及其他人的“单元素艺术”(“Single Div Art”)印象深刻,所谓“单元素艺术”就是你可以使用一个
叙帝利
2018/01/17
1.5K0
用 CSS 隐藏页面元素
用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域。
全栈程序员站长
2022/08/09
1.6K0
如何在 JS 中的数组开头添加元素?
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
前端小智@大迁世界
2021/03/02
9.6K0
css3动画代替js脚本实现欢迎页面动画
两者都能实现类似效果,但是在css3动画中可以实现跟多的细节,通过transition-timing-function是不是可以做跟多的改变呢,现在流行的趋势中,mvvm的思想都是尽量不用dom操作,所以说将来的css3动画会右更多的发展空间 在现在流行的js库中,实现动画更多的使用的是css3的animation实现,还有浏览器对css3的支持度越来越高,在对比中提现css3将来的地位还是举足轻重的,
天天_哥
2018/09/29
4.1K0
css中的动画效果
在前端中,随着语言的发展,css变得越来越强大,可以实现许多动态动画效果! 下面是动画效果的基本格式
用户8247415
2021/04/13
2.3K0
css中的动画效果
如何在折线图上添加动画效果?
要在 Chart.js 的折线图上添加动画效果,可以使用 Chart.js 提供的配置选项来实现。以下是一个示例,展示了如何在折线图上添加简单的动画效果:
王小婷
2023/09/09
4540
CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档。 一、阴影 1.1、文字阴影 text-shadow <
张果
2018/01/04
3.2K0
CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)
用 CSS 隐藏页面元素的 5 种方法
用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域。
疯狂的技术宅
2019/03/28
2K0
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
1:点击添加按钮弹出弹框,form表单可以填写相关的信息 2:点击保存按钮,相关信息会显示在界面的列表里
王小婷
2019/02/26
7.3K0
如何在 Web 关闭页面时发送 Ajax 请求
有时候我们需要在用户离开页面的时候,做一些上报来记录用户行为。又或者是发送服务器ajax请求,通知服务器用户已经离开,比如直播间内的退房操作。
grain先森
2019/05/10
3.3K0
如何在 Web 关闭页面时发送 Ajax 请求
纯css3实现元素定点圆环扩散动画
主要是通过box-shadow合阴影结合css3动画关键帧@keyframes来实现
itclanCoder
2023/09/14
4590
纯css3实现元素定点圆环扩散动画
使用css3给页面添加阴影效果
使用css3给页面添加阴影效果 <!doctype html> <html> <head> <style type="text/css"> body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px
用户8671053
2021/09/23
6600
使用css3给页面添加阴影效果
使用css3给页面添加阴影效果 <!doctype html> <html> <head> <style type="text/css"> body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px
用户7718188
2021/11/01
6020
CSS——动画
动画属性是一些与动画相关的CSS属性,可分为两大类:Transition和Animation。
Html5知典
2019/11/26
8910
元素的动画
转换(transform),也称变形。就是改变元素在页面中的位置,大小,角度以及形状。
云叶知秋
2023/10/16
1490
元素的动画
如何在 Photoshop 中制作 GIF 动画
您可能已经使用过一些在线 gif 生成器来快速生成 gif 图像,但这些在线生成器无法提供与 Photoshop 相同的灵活性和结果。
西门吹雪1997
2023/10/10
4750
Selenium操作Frame中的页面元素
在Web应用中经常会遇到网页中嵌套多个Frame框架的情况。这种情况下,如果直接去定位嵌套在Frame页面中的元素就会抛出NoSuchElementException异常。所以在操作嵌套在Frame框架上页面元素前,需要将页面焦点切换到Frame中。Selenium提供的switch_to.frame()方法可以实现Frame之间的跳转。
Altumn
2019/10/21
2.5K0
Selenium操作Frame中的页面元素
点击加载更多

相似问题

向元素添加类以在Javascript中运行CSS动画

348

向页面添加元素后的GWT - CSS动画

10

如何在使用jQuery显示元素时添加animate.css动画

10

如何在ajax打开前页面中添加css加载动画

14

加载页面时显示动画,如:hover:before

113
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档