在Bootstrap中的CSS转换中的JavaScript – “强制回流”
发布时间：2020-12-18 00:15:54 所属栏目：安全 来源：网络整理
导读：从Twitter的引导中修改bootstrap-modal jquery插件，我看到他们使用CSS转换来进行衰落效果。 从代码中吸引我的一件事是这一行： that.$element[0].offsetWidth // force reflow 如果该行被注释，则转换不起作用。 我发现关于它的意思的所有参考是“强制回流
|
从Twitter的引导中修改bootstrap-modal jquery插件，我看到他们使用CSS转换来进行衰落效果。
从代码中吸引我的一件事是这一行： that.$element[0].offsetWidth // force reflow 如果该行被注释，则转换不起作用。 如何阅读该属性可以影响CSS转换？这是为了解决浏览器中的错误吗？ 解决方法
稍后回复的位置，但是我正在解决CSS转换中的一些问题，我认为与您发现的这一段代码有关，希望可以帮助您理解它！
基本上，我从JavaScript / jQuery中切换一个类，将css转换添加到dom元素。然后更新该元素的CSS，导致转换发生。代码的简化版本如下： var myelement = $("myselector");
// Set z-indexes before the transition
myelement.css("z-index",1);
var reflow = root.offset().left; // Re-flow the page
// Set the transition class on the element which will animate
myelement.addClass("trans");
myelement.css("width",0 + "px"); // Animate to nothing
所以如果我取消对我的重新流动线的注释，我的转换将会发生，但是有时候(在Safari Safari中似乎更经常)，不会更新myelement的z-index。 对我来说，似乎在某些情况下，写入dom的样式在某处被缓存，而不是被刷新。 这是对左偏移量的调用的地方。这是属于被称为在页面中引起重新流动的属性之一。这显然通常是性能明智的坏事，但似乎有必要防止css转换错误的值。 有一个有趣的Mozilla bug讨论同一主题。可能有兴趣他们建议添加一个API以正确地从代码开始转换。 这也是interesting SO post强制重新流动。 希望这可以帮助！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |