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

CSS 过渡不会触发隐藏元素

在 Web 开发中，通常使用 CSS 过渡来对元素属性的更改进行动画处理。然而，一个常见的障碍是当一个元素最初被隐藏（例如，使用 display: none），然后变得可见，但 CSS 过渡没有激活。

CSSOM 和的幕后花絮DOM

要理解这种行为，我们需要考虑 CSS 对象模型 (CSSOM) 和文档对象模型之间的关系（DOM）。 DOM 表示页面的 HTML 结构，而 CSSOM 表示每个元素的计算样式。

在渲染过程中，首先发生 DOM 操作（例如，更改显示属性）。然后，浏览器重新计算页面上所有元素的计算样式 (CSSOM)，称为回流或布局。最后，这些变化会以视觉方式呈现在屏幕上（绘画）。

对 CSS 过渡的影响

CSS 过渡需要元素的初始计算样式来计算开始状态。但是，对于隐藏元素，计算出的样式本质上为空，因为它们不会显示。这意味着当触发转换时，初始状态对于任何可转换值都无效。

解决方案

要解决此问题，您可以使用以下方法之一方法：

• 强制回流：使用 requestAnimationFrame 或其他方法触发回流会强制浏览器重新计算计算的样式。通过在触发转换之前调用回流，您可以确保计算的样式是最新的。
• 在内部使用 $.animate()**: .animate()通过触发 DOM 操作然后调度回调来触发转换来强制回流。但是，这种方法通常比使用直接回流方法慢。

示例

以下代码片段演示了如何使用 requestAnimationFrame 强制回流：

$('button').on('click', function() {
  $('.b').show(); // Show the hidden element

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

通过使用requestAnimationFrame，我们确保CSS转换能够成功触发，即使对于最初隐藏的元素。

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