伪元素导致回流的CSS波纹效果

文章/答案/技术大牛

发布

1回答

css、reactjs、sass、styled-components、reflow

我正在尝试创建带有样式组件的材质涟漪效果(无法导入材质web组件混合)。我想坚持使用after元素作为前景效果，以保持可访问性树的完整性。然而，最值得注意的是，在移动设备上，涟漪过渡正在导致按钮内容的回流。这似乎是因为显示的改变(从无到块)，但我已经尝试了一些不共享这个工件的替代方案，并且这个副作用仍然存在。这是我的代码(我使用了一些道具来设置波纹，但是如果你想重

浏览 25提问于2020-09-23得票数 0

回答已采纳

2回答

浏览器重绘/重排性能:使用CSS3梯度与PNG梯度

performance、reflow

我正在开发一款应用程序，它会导致大量的浏览器回流。在这里，性能是一个关键问题。从性能的角度来看，对某些DOM元素使用CSS3渐变还是图像渐变更好？使用CSS文本阴影和渐变的页面与使用图像实现这些视觉效果的页面是否会有较慢的回流速度？另外，有没有我可以使用的回流测试？

浏览 3提问于2010-11-03得票数 1

回答已采纳

2回答

对DOM元素进行动画处理最快的CSS显示属性是什么

javascript、dom、animation、css

看起来导致较少的回流另外，是否有任何css属性可以设置为确保更改一个dom元素不会影响其他元素的布局，从而导致额外的重绘或回流。

浏览 1提问于2011-10-02得票数 3

回答已采纳

1回答

如何使伪类回流？

javascript、css、pseudo-class

我有一个旋转木马，里面有带动画的孩子。每次我更改幻灯片时，我都希望动画重新开始/回流。问题是动画是应用在一个:before伪类上。我搜索了一下导致一个元素回流的原因，我想出了一些类似的东西： const reset_animation = (el) => { reset_ani

浏览 13提问于2021-07-23得票数 0

2回答

内容在插入或更新TextBoxes/DropDownList时跳转

asp.net、html、ajax

当我按tab键从一个textBox切换到另一个textBox时，我的.aspx窗体会跳来跳去，但最糟糕的跳跃发生在我从DropDownList按tab键切换到另一个DropDownList时。没有复杂的东西，没有网格视图，没有标签。我做错了什么？

浏览 0提问于2009-08-20得票数 0

2回答

<a>元素上的Firefox空格奇怪错误

css、firefox、firebug

我已经包含了一个对此进行了深入的描述，但基本上火狐在元素中添加了左/右空白，使得感知到的填充不同于Chrome和IE。如果我修改Firebug中的值并改回原来的值，那么空白就消失了，并且按照我最初的预期工作。这是非常令人沮丧的，有什么想法吗？更新1:这是一个测试服务器，你可以在上面检查代码，它可能与视频略有不同，但问题仍然是一样的。更新2:它似乎是FF有问题的:第一个字母<

浏览 2提问于2012-10-31得票数 5

回答已采纳

1回答

javascript -如何提高性能？

javascript

ggpht.com/_8Nsej4QeRGg/TE5m5zRf4bI/AAAAAAAAAgo/pQGKPX8zn9c/gadget-01.jpg"/>那么有什么不同呢？为什么在清晰的页面上js会更快？

浏览 0提问于2011-01-05得票数 1

回答已采纳

2回答

更改图像的src属性时是否会导致回流？

javascript、html、css

正如我们所知，更改元素外观时会发生重绘，而更改布局时会发生重排。但是，我有一个问题，当更改img src属性时，是否会导致回流。例如，有两个不同大小的图像，分别称为A.png和B.png。document.querySelector('button').onclick = function() {} 因为A.png和B.png的大小不同，所以在更改i

浏览 60提问于2019-04-03得票数 1

2回答

HTML/firefox/webkit改变页面视觉内容的'#id‘链接的奇怪行为

html、firefox

正常页面如下所示：我理解错了什么，实际发生了什么，以及如何修复它？注意:示例链接的内容在将来肯定会发生变化；我不知道将它们保存为更永久的示例在哪里比较合适。生成这些页面的源代码在这里：。

浏览 1提问于2011-02-03得票数 0

回答已采纳

2回答

为什么DOM操作需要这么长时间？

javascript、dom

我以前读到过，操纵DOM是在javascript中能做的最昂贵的事情之一。我也看到过它在中的演示。为什么花了这么长时间？

浏览 1提问于2012-12-14得票数 0

回答已采纳

2回答

使用css div值移动-top位置

html、css

您好，我不确定这是否是正确的方法，但我正在尝试将div标记放回前面的div元素上，这是我正在工作的内容我用来让它工作的css看起来像这样background-color: #fff;position: relative;}

浏览 0提问于2012-04-07得票数 4

回答已采纳

1回答

更改容器元素中的属性是否总是会导致重绘或回流？

javascript、css、performance、repaint、reflow

即使没有关联的CSS，通过JavaScript更改主容器元素中的信息属性(例如数据属性)(甚至是CSS类)是否会影响性能？(DOM的表示方式没有相关的变化。)例如，将相同的属性更改降级到隐藏输入代理是不是更好？在中，答案表明所有DOM突变都会导致重新绘制或回流。建议他们更有选择性地发生。属性可以在CSS选择器中作为目标，所以我猜测在浏览器评估重绘或回流的可能性时

浏览 10提问于2016-09-01得票数 2

1回答

在一次操作中更改元素属性(数据集)-避免回流

javascript、css、reflow

我尽量避免使用CSS Reflows，通常DocumentFragment就足以满足我的需求。我在修改/添加/删除datasets时遇到过这样的情况，问题是每个dataset都需要一个导致回流的操作。element.dataset是一个只读对象，所以我想知道在本例中只有一次回流而不是3次回流时，我该如何做？element.dataset.a='1'element.dataset

浏览 2提问于2021-09-30得票数 0

3回答

Bootstrap中CSS转换中的“强制回流”

javascript、jquery、css、twitter-bootstrap

修改Twitter的bootstrap中的引导模式jquery插件，我发现他们使用CSS过渡来实现淡入淡出效果。that.我找到的关于它含义的所有参考资料都是“强制回流”注释。读取该属性会如何影响CSS转换？这是为了解决浏览器中的错误吗？

浏览 0提问于2012-01-26得票数 20

回答已采纳

3回答

在Internet Explorer中触发刷新事件

javascript、css、internet-explorer

在我的一个动态网站上，我遇到了一个问题，包括以下几点：在Internet Explorer6中，在JavaScript的帮助下更改div元素的大小后，其高度为100%的子元素不会立即刷新(即。不要拉伸到它们的新大小)，但仅当单击父div时。在我看来，文档需要一些更新。我想问一下，是否有一种命令(就像Flash中的命令)可以在发生动态更改后更新文档？简而言之，如何解决这个问题？

浏览 0提问于2010-02-14得票数 0

3回答

在DOM环境中什么时候会发生回流？

javascript、performance、dom、reflow

什么类型的活动会触发使用DOM的网页回流？添加或删除DOM节点时的。动态应用样式(如element.style.width="10px").When )时的。检索必须计算的度量值，如访问offsetWidth、clientHeight或任何计算的CSS值(通过DOM兼容浏览器中的getComputedStyle()或IE中

浏览 16提问于2009-02-04得票数 52

回答已采纳

1回答

可以在CSS中创建波纹窗帘效果吗？

css

在Dribbble上找到了这张照片：我只是想知道是否有可能在CSS中做这样的事情？有没有可能操纵元素来产生自定义的连锁反应效果？

浏览 3提问于2013-04-28得票数 1

回答已采纳

5回答

有没有办法批量应用多个CSS样式来避免多个回流？

javascript、dom、layout

我知道直接通过JavaScript改变元素的样式会导致回流。然而，我想知道是否有可能在只有一次回流的批处理中更改多个样式值？

浏览 1提问于2010-11-18得票数 14

回答已采纳

2回答

布局颠簸、回流在HTML中的含义是相同的吗？

javascript、html、css

我读了一些介绍“布局颠簸”和“回流/重绘”的帖子，这让我感到困惑。在一些帖子中，它说“布局颠簸”和“回流”是一回事。() () 但是在和中，导致它们的CSS属性是不同的。如果有相同的，导致每个的属性都是相同的，这是有意义的。那么“布局颠簸”和“回流”是一样的吗？

浏览 7提问于2021-03-03得票数 2

3回答

减少网页CSS计算量的方法

css、performance、extjs

我们的应用程序在工作中使用ExtJS (Sencha)框架作为UI。我对框架的问题是框架输出的HTML数量太多。我注意到，被用户报告为运行缓慢的系统区域有大量的CSS计算调用。我在Google的Speedtracer中测量了这一点，有些页面需要8秒才能加载。80%的时间完全用于CSS计算。在试图改变框架的工作方式之前，有没有延迟页面的CSS计算，或者这些计算是在呈现对象时进行的吗

浏览 0提问于2010-11-26得票数 5

回答已采纳

点击加载更多