为什么 CSS 过渡对最初隐藏的元素不起作用？

CSS 过渡不适用于最初隐藏的元素

当元素最初使用 CSS 的显示隐藏时：无，任何应用于该元素的 CSS 过渡当其可见性改变时不会触发。这是因为 CSS 过渡依赖于元素的初始计算样式，对于隐藏元素，该样式将为空。

CSSOM 与 DOM

要了解此行为，区分 CSS 对象模型 (CSSOM) 和文档对象模型 (DOM) 很重要。 DOM 表示 HTML 文档的层次结构，而 CSSOM 包含每个元素的计算样式。

回流和绘制

当元素的可见性为更改后，浏览器需要更新 CSSOM 并重排页面以反映更改。回流会根据元素的 CSS 规则重新计算元素的计算样式和位置。绘制是在屏幕上渲染页面的过程，发生在重排之后。

过渡启动

CSS 过渡通过在元素的初始计算样式与其元素之间进行插值来工作最终风格。当元素最初隐藏时，其计算样式将为空，因此转换算法无法创建初始状态。

解决方案：强制回流

来触发转换对于隐藏元素，需要在更改其可见性后强制回流。这可以使用 requestAnimationFrame API 来实现，该 API 在浏览器绘制页面之前执行回调。

通过使用 requestAnimationFrame，可以在浏览器更新 CSSOM 后应用 CSS 过渡，从而允许过渡正确启动。

示例

这是代码的修改版本使用 requestAnimationFrame 强制回流：

$('button').on('click', function() {
  $('.b').show();

  requestAnimationFrame(() => {
    document.body.offsetHeight; // Force a reflow
    $('.b').css('right', '80%');  // Trigger the transition
    $('.a').css('right', '80%');
  });
});

总之，CSS 过渡不适用于最初隐藏的元素，因为 CSSOM 不包含它们的初始计算样式。要触发转换，需要在更改元素的可见性后强制回流。

以上是为什么 CSS 过渡对最初隐藏的元素不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！