为什么最初隐藏时元素转换会失败？

最初隐藏时元素转换失败

场景概述

考虑两个元素，标记为 ' A' 和 'B'，其中 'B' 最初使用 display: none 隐藏。当通过 $.show() 或 $.toggle() 等方法使用过渡来为“B”设置动画时，该元素会立即出现在其最终位置，而无需任何动画。

说明

根本原因在于文档对象模型（DOM）和CSS对象模型（CSSOM）之间的关系。 CSS 转换依赖于元素的最后计算值。对于最初隐藏的元素，计算值是 display: none，这实际上是从 CSSOM 中删除元素。

DOM 操作和回流

DOM 操作阶段涉及更新JavaScript 对象，这是一个异步过程。相比之下，重排阶段仅在必要时才会发生，该阶段会更新 CSS 规则并重新计算计算样式。由于最初隐藏的元素没有计算样式，因此它们在 DOM 操作期间不会触发回流。

转换初始状态

因此，当 ' 的转换时B'开始，初始状态未定义，因为回流尚未发生。这可能会导致不正确的转换。

强制重排

要解决此问题，您可以在触发转换之前强制重排。您可以使用 Element.getBoundingClientRect() 或 element.offsetHeight 来实现此目的，这需要最新的计算值，因此强制回流。

强制回流的改进示例

这是一个修改后的代码片段，在动画转换之前强制回流：

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

  requestAnimationFrame(() => { // wait just before the next paint
    document.body.offsetHeight; // force a reflow
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
});

通过在触发转换之前强制回流，您可以确保计算值是最新的，允许过渡正常工作。

以上是为什么最初隐藏时元素转换会失败？的详细内容。更多信息请关注PHP中文网其他相关文章！