Animiere Übergang in neue Höhe für Container-Div, wenn Elemente aus Container entfernt werden

Question

Ich habe einen Filter mit jQuery gemacht, um einige Elemente aus einem Div zu entfernen, wenn Sie darauf klicken. Ich benutze opacity:0 und visibilty:hidden so gibt es eine Fade-Animation für diese Elemente, wenn sie gefiltert werden. Nach der Fade-Animation verwende ich dann display:none, um sie aus dem Div zu entfernen. Wenn sie dann wieder ungefiltert sind, werden sie auf display:block gesetzt und opacity:1 gesetzt, um sie wieder zu animieren.

Wenn der Inhalt des Divs mit display:none "entfernt" wird, wird die Höhe des Containers sofort auf die neue kürzere Höhe gesetzt. Ich möchte, dass das Container-Div mit einer Animation auf seine neue Höhe verkürzt wird, anstatt sofort die Höhe zu ändern. Gibt es eine Möglichkeit, dies bisher mit meiner Lösung zu tun?

Ich habe erwartet, dass das Hinzufügen von transition: all 0.35s ease-in würde funktionieren, wenn der Inhalt entfernt wurde, aber es ändert sich sofort auf seine neue Höhe. Da dies ein reaktionsschnelles Design ist, ist die Höhe nicht fest, es variiert bei verschiedenen Bildschirmbreiten.

Der Code kann auf der folgenden jsfiddle sehen ... https://jsfiddle.net/qv5vrz6c/

Answer 1

Das Problem mit Anzeigeeigenschaft des Spielens Ein-/Ausblenden ein Element ist, kann man nicht CSS-Übergänge auf sie anwenden.

Sie können jedoch die height des Elements mit einem overflow:hidden; verwenden den Trick zu tun:

.web-box, .game-box{ 
    transition:all 0.5s; 
    height: 120px; 
    overflow: hidden; 
} 

.web-box.mp-hide, .game-box.mp-hide{ 
    height: 0; 
    transition:all 0.5s; 
} 

Live example