Hinzufügen von Animation zu Flex-Wrap

Question

Wenn es um Wrap Point geht, wie können wir Animation hinzufügen?

vielleicht kann dies helfen:

wir haben einen Header und innerhalb dieser Header haben wir Behälter mit Flex attr und die Richtung Spalte ist, wenn wir unseren Browser von unten vergrößern, verkleinern oder nach oben, wenn wir Höhe Browser zu ändern diejenigen Artikel plötzlich neu zu gestalten, habe ich gerade Animation zu diesem event.thx

<header> 
     <div class="container"> 
      <div class="item1 item"></div> 
      <div class="item2 item"></div> 
      <div class="item3 item"></div></div></header> 


header { 
     width: 200vw; 
     max-height: 100vh ; 
    } 


.container{ 
     display: flex; 
     max-height:100vh; 
     flex-direction: column; 
     flex-wrap: wrap; 
     align-content:flex-start; 
} 



.item1 { 
    background-color: red; 
    height: 200px; 
    flex: 1 0 150px; 
} 


.item2 { 
    background-color: blue; 
    height: 200px; 
    flex: 1 0 150px; 

} 


.item3 { 
    background-color: orange; 
    height: 200px; 
    flex: 1 0 150px; 

} 

Answer 1

dies ist zwar nicht mit CSS hinzufügen möchten allein getan werden kann, können Sie diese mit JQuery erreichen. Wenn Sie eine Flexbox mit Zeilen betrachten, ändert die flexbox die Höhe, wenn eine neue Zeile erstellt oder entfernt wird. Wenn wir das wissen, können wir der Seite eine .resize() -Funktion hinzufügen, um zu testen, ob eine Fenstergröße die Höhe der Flexbox verändert hat. Wenn dies der Fall ist, können Sie eine Animation ausführen. Ich habe ein Beispiel JFiddle here erstellt. Hier

ist der Code, der diese Arbeit macht:

$(document).ready(function() { 
var height = $('.container').css('height'); 
var id; 
$(window).resize(function() { 
    clearTimeout(id); 
    id = setTimeout(doneResizing, 500); 
}); 
function doneResizing() { 
     var newheight = $('.container').css('height'); 
    if (newheight != height) { 
     $('.item').fadeOut(); 
     $('.item').fadeIn(); 
     height = newheight; 
    } 
    } 
}); 

Jetzt mit einem Flexbox Spalten verwenden, müssen wir erkennen, wenn eine Änderung der Breite auftritt. Dies ist etwas schwieriger, da die Flexbox-Breite die maximal zugewiesene Breite einnimmt, da sie standardmäßig ein Blockstyle-Element ist. Um dies zu erreichen, müssen Sie es entweder als inline-flexbox mit display: inline-flex einstellen oder eine maximale Breite für die flexbox festlegen, die der Breite des Inhalts am größten entspricht. Sobald Sie einen dieser Werte festgelegt haben, können Sie den gleichen Code wie oben verwenden, außer dass Sie ihn ändern, um Änderungen in der Breite statt in der Höhe zu erkennen.

Diese Änderungen haben eine Animation auf alle Elemente bei der Größenänderung angewendet. Was ist, wenn Sie es nur auf das Element anwenden möchten, dessen Zeile/Spalte sich ändert? Dies würde mehr Aufwand erfordern, ist aber machbar. Sie müssten viele if-Anweisungen in Ihren javascript/jquery-Code schreiben, um herauszufinden, auf welchem ​​flex-Element die Animation basierend auf Breite/Höhe angewendet werden soll.