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

CSS 过渡最初在隐藏元素上不起作用

尝试使用 CSS 过渡对隐藏元素的属性进行动画处理时，您可能会遇到元素立即显示在其最终位置的问题。这是由于 CSS 对象模型 (CSSOM) 和文档对象模型 (DOM) 之间的关系造成的。

Reflow 和 CSSOM 的作用

CSS 过渡决定它们的初始状态基于元素的计算样式。但是，当元素具有 display: none 时，浏览器会忽略其计算样式，因为该元素实际上对 CSSOM 不可见。

在您的场景中，当您触发 .b 上的转换时，它没有计算样式，因为它是隐藏的。因此，过渡无法正确初始化。

强制回流

要解决此问题，您可以在启动之前强制浏览器更新隐藏元素的计算样式过渡。这是通过触发重排来完成的。

重排是浏览器重新计算整个页面的布局和计算样式的过程。这可以在必要时由某些 DOM 方法或浏览器本身触发，例如当屏幕刷新时。

使用 requestAnimationFrame() API，您可以请求浏览器在下一次绘制之前执行重排发生操作。这可确保过渡开始时元素的计算样式是最新的。

更新的代码

$('button').on('click', function () {
  $('.b').show(); // Apply display:block synchronously

  requestAnimationFrame(() => {
    // Force a reflow
    document.body.offsetHeight;

    // Trigger the transitions
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
})

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