Warum wirkt sich ausgeblendeter Inhalt auf das Layout aus, selbst wenn der Überlauf auf dem übergeordneten Element verborgen ist?

Question

Ich versuche, einen Inhaltsblock zu animieren (5 Sekunden nach der Anzeige kollabiert), die funktioniert, aber ich habe dieses Artefakt, wo der display: none Inhalt nach dem Kollaps Übergang immer noch das Layout beeinflusst, auch bei der Angabe overflow: hidden.

Der Code ist wie folgt (und here is the codepen, wie ich immer Fehler in dem SO-Code Läufer bin):

setTimeout(() => { 
 
    $('#container').addClass('closing') 
 
}, 5 * 1000)

#container { 
 
    transition: all linear 0.5s; 
 
    margin-bottom: 0rem; 
 
    min-height: 4rem; 
 
    opacity: 1; 
 
    .step { 
 
    transition: all linear 0.5s; 
 
    & * { 
 
     transition: all linear 0.5s; 
 
    } 
 
    } 
 
    &.closing { 
 
    min-height: 0rem; 
 
    height: 0rem; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    & * { 
 
     overflow: hidden; 
 
     min-height: 0rem; 
 
     height: 0rem; 
 
     padding-top: 0rem; 
 
     padding-bottom: 0rem; 
 
    } 
 
    } 
 
} 
 
#bottom-block { 
 
    height: 5rem; 
 
    width: 100%; 
 
    color: white; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/> 
 
<div id="container" class="ui closing steps"> 
 
    <div class="completed step"> 
 
    <div class="content"> 
 
     <div class="title">Shipping</div> 
 
     <div class="description">Choose your shipping options</div> 
 
    </div> 
 
    </div> 
 
    <div class="completed step"> 
 
    <div class="content"> 
 
     <div class="title">Billing</div> 
 
     <div class="description">Enter billing information</div> 
 
    </div> 
 
    </div> 
 
    <div class="active step"> 
 
    <i class="info icon"></i> 
 
    <div class="content"> 
 
     <div class="title">Confirm Order</div> 
 
     <div class="description">Verify order details</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div id="bottom-block"> 
 
    Testing 
 
</div>

ich um in dem Styles auf Chrom gehackt habe, um zu sehen, ob Ich kann herausfinden, was das verursacht, aber selbst wenn man alle :before und :after Pseudoelemente manuell entfernt, ist es immer noch nicht vollständig kollabieren.

Irgendwelche Ideen, wie man das zum Laufen bringt?

(Beachten Sie auch, dass ich nicht JQuery in dem realen Code verwenden, sondern Klassen durch staatliche Verwaltung setze in React. Nicht relevant, wollte nur vermeiden „Warum nicht verwenden JQuery Animationen?“, Antwortet.)

Update: Here is the forked codepen mit der implementierten Änderung von unten. Danke für die Hilfe!

Answer 1

Ihr .ui.steps Element hat display inline-flex: daher handelt es sich um ein Inline-Element, das durch eine line box (https://www.w3.org/TR/2007/WD-css3-box-20070809/#line-box.) Dargestellt wird.

Er belegt mindestens eine Zeilenhöhe des vertikalen Bereichs im übergeordneten Element, in diesem Fall das body-Element.

Um das zu veranschaulichen, versuchen Sie, die Schriftgröße und Zeilenhöhe Ihres Körpers zu reduzieren: Sie werden den Raum verkleinern sehen. Natürlich ist das Hacken von Schriftgrößen keine gute Lösung, man kann es nicht einmal komplett verschwinden lassen, da die meisten Browser Schriftgrößen von 0 ignorieren.

Edit: als @cmprogram habe gesagt, mit display: none ist normalerweise der Beste Bewegung hier. Auch gibt es keine solche Sache wie display:hidden, ich denke, Sie sind verwirrend mit visibility:hidden

Answer 2

ist das Problem in Ihrem

Displays: Inline-flex;

Versuchen Sie es mit:

display: block;

oder

display: biegen;

statt.