为什么 CSS 过渡不适用于最初隐藏的元素？

CSS 转换不适用于最初隐藏的元素

理解问题

在所描述的场景中，有两个 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中文网其他相关文章！