理解问题
在所描述的场景中,有两个 div ,其中之一最初使用 display:none 隐藏。当使用show()或toggle()等方法显示隐藏的div时,其属性转换不会顺利发生。相反,div 会立即出现在所需的结束位置。
行为的原因
要理解此行为,我们需要深入研究 CSSOM ( CSS 对象模型)和 DOM(文档对象模型)。
CSS 过渡依赖于了解元素的初始计算样式值来确定过渡的起点。但是,带有 display:none 的元素没有计算出的样式值,因为它们在 CSSOM 中不被视为可见。
重排的影响
重排是一种重新计算的浏览器操作基于 DOM 或样式规则更改的文档布局。当 display:none 被删除时,浏览器会启动回流来更新 DOM 和计算的样式值。
在给定的场景中,如果在回流发生之前开始转换,则隐藏 div 的初始计算样式值将无效,导致突然出现。
解决问题
选项 1:使用 $.animate()
$.animate() 在执行动画之前触发重排,确保计算出的样式值是最新的。
选项 2:手动强制重排
使用 requestAnimationFrame() 允许我们在下一次绘制操作之前安排代码执行。在回调中,我们可以使用 document.body.offsetHeight 等方法强制回流,然后通过设置所需的 CSS 属性值立即触发转换。
结论
CSS 转换期间最初隐藏的元素突然出现是由于缺乏有效的计算样式值。通过了解回流过程并使用强制回流的技术,我们可以确保最初隐藏的元素平滑过渡。
以上是为什么 CSS 过渡不适用于最初隐藏的元素?的详细内容。更多信息请关注PHP中文网其他相关文章!