同时从 parent 和 child 更改 flex 会触发闪烁

Question

我有这样的结构：

<div id="app">
  <div class="document-reader-root">
    <div class="left-bar">
       Left bar
    </div>

    <div class="content">
      Content
    </div>
  </div>
  
  <div class="right-bar">
    Right bar
  </div>
</div>

单击按钮后，我将更改 left-bar 和 content 的弹性大小，但这会触发内容的小幅移动。很难用语言来解释它，所以我创建了一个 jsfiddle 来演示它。仅供参考，我不能改变div的结构。

关于如何防止这种情况的任何想法？

谢谢！

Answer 1

当侧边栏被隐藏时，您可以尝试更改内容大小

.doc-content {
   transition: max-width 0.5s ease-in-out;
}

.hide-panels {
  .doc-content {
    max-width: 250px;
  }
}

更改 max-width 使闪烁消失

Answer 2

我认为您遇到的问题是您正在为不属于每秒 60 帧 (FPS) 规范的 CSS 属性设置动画。当您为此类属性设置动画时，您会出现抖动/闪烁。

具有流畅 60FPS 的属性是 transform 和 opacity。 flex、margin、top 等属性在设置动画时容易出现闪烁。

您可以在此处阅读更多相关信息：Animation performance and frame rate。与您的问题相关的部分在 'CSS property cost'

下

注意：虽然 Firefox 也使用此规范，但即使在 60fps 下，动画有时也容易因亚像素渲染问题而闪烁（这不是导致您的问题的原因）虽然有问题 - Firefox sub-pixel rendering bug，但很容易知道）。

同时从 parent 和 child 更改 flex 会触发闪烁

Changing flex from parent and child at the same time triggers a flickering

html

css

flexbox

css-transitions