为什么CSS转换需要触发重排？

Question

“在删除不可见的类之前，需要触发重排，以使过渡按预期进行。”

我的问题是：

1）为什么需要触发回流？

2）我知道我们应该避免使用重排，如果确实如此，那么为什么作者建议使用重排以使过渡正常工作？

3）除了使用回流以外，还有其他方法可以使过渡工作吗？

谢谢。

Answer 1

（有效地：“为什么我不能 轻易 在display属性中使用过渡”）

简短答案 ：

CSS过渡依赖于元素的 开始 或 静态 属性。将元素设置为display: none;文档（DOM）时，将呈现该元素不存在的状态。这意味着将其设置为display: block;-没有过渡值。

更长的答案 ：

1. 由于display: none;尚未在文档中绘制设置为的元素，因此需要触发重排。这样可以防止转换具有起始值/初始状态。设置一个元素display: none;使文档呈现就好像该元素根本不存在。
2. 他建议进行重排，因为通常接受用display: none;和隐藏和显示元素display: block;-通常是在某个动作（选项卡或按钮单击，回调函数，超时函数等）请求元素之后。过渡是UX 的 巨大 好处，因此重排是允许发生这些过渡的相对简单的方法。当您在简单网站上使用简单转换时，它不会产生巨大影响，因此出于一般目的，即使在技术上您不应该这样做， 也可以 触发重排。想想这个人的例子，例如在生产站点中使用未缩小的JavaScript文件。 可以 吗 当然！ 应该 吗 可能不是，但是在大多数情况下，它不会产生明显的变化。
3. 有多种选项可以防止重排，或者通常比您提供的链接中的方法更易于使用。以以下代码段为例：

答 ：此元素设置为height: 0;和overflow: hidden;。如图所示，它设置为height: auto;。我们仅将动画应用于opacity。这给我们带来了类似的效果，但是我们可以在不进行重排的情况下进行过渡，因为它已经在文档中呈现并提供了过渡的初始值。

B ：此元素与A相同，但是将高度设置为定义的大小。

A和B可以 很好地 进行元素淡入，但是由于我们将高度设置为从auto/100px到0瞬间，它们在“淡出”时似乎会塌陷

C ：此元素是隐藏的，我们尝试转换子级。您会看到这也不起作用，需要触发重排。

D ：这个元素是隐藏的，我们 会给 孩子 设置动画
。由于动画关键帧提供了定义的开始和结束值，因此效果更好。但是请注意，由于黑框仍附着在父级上，因此它会迅速进入视野。

E ：这与D相似，但是我们将所有东西都交给孩子，这不能解决D遇到的“黑盒子”问题。

F
：这可能是两全其美的解决方案。我们将样式从父母移到孩子。我们可以从父级触发动画，并且可以根据需要控制子级的display属性和animate过渡。不利的一面是，您需要使用动画关键帧而不是过渡。

G
：虽然我不亲自解析它，但我不知道这是否会触发函数内部的重排，但是您只需使用jQuery的.fadeToggle()函数就可以用一行JavaScript来完成所有这些操作，并且经常使用（或类似的JS
/ jQuery fadeIn / fadeOut方法），回流的主题并不会经常出现。

例子：

这是一个片段：

jQuery(document).ready(function($){

  $('button:not(#g)').click(function(){

    $(this).next('div').toggleClass('show');

  });



  $('#g').click(function(){

    $(this).next('div').stop().fadeToggle(2000);

  });

});


* { box-sizing: border-box; }



button {

    text-align: center;

    width: 400px;

}



div {

    margin-top: 20px;

    background: #000;

    color: #fff;

}



.a,

.b {

    overflow: hidden;

    height: 0;

    opacity: 0;

    transition: opacity 3s;

}



.a.show {

    height: auto;

    opacity: 1;

}

.b.show {

    height: 100px;

    opacity: 1;

}



.c,

.d {

    display: none;

}



.c.show,

.d.show {

 display: block;

}



.c div {

    opacity: 0;

    transition: 3s all;

}



.c.show div {

    opacity: 1;

}



.d div {

    opacity: 0;

}



.d.show div {

    animation: fade 3s;

}



@keyframes fade {

    from { opacity: 0; }

      to { opacity: 1; }

}



.e div {

    display: none;

}



.e.show div {

    display: block;

    animation: fade 3s;

}



.f {

    background: transparent;

}



.f div {

    background: #000;

    display: none;

}



.f.show div {

    display: block;

    animation: fade 3s;

}





.g {

    display: none;

}


<button id="a">A: Box Height: Auto</button>

<div class="a">This<br/>Has<br/>Some Strange<br/><br/>Content<br>But<br>That doesn't really<br>Matter<br/>Because shown,<br/>I'll be<br/>AUTO</div>

<button id="b">B: Box Height: 100px</button>

<div class="b">Content For 2</div>

<button id="c">C: Hidden - Child Transitions (bad)</button>

<div class="c"><div>Content<br/>For<br/>3<br/></div></div>

<div style="clear: both;"></div>

<button id="d">D: Hidden - Child Animates (Better)</button>

<div class="d"><div>Content<br/>For<br/>4<br/></div></div>

<div style="clear: both;"></div>

<button id="e">E: Hidden - Child Hidden & Animates</button>

<div class="e"><div>Content<br/>For<br/>5<br/></div></div>

<button id="f">F: Child Has BG & Animates (Works)</button>

<div class="f"><div>Content<br/>For<br/>5<br/></div></div>

<div style="clear: both;"></div>

<button id="g">G: This uses fadeToggle to avoid this</button>

<div class="g">I animate with<br/>JavaScript</div>

<footer>I'm just the footer to show the bottom of the document.</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>