dodanie animacji flex-wrap

Question

jeśli chodzi o punkt owinąć jak możemy dodać animację?

być może to pomoże:

mamy nagłówek i wewnątrz tego nagłówka mamy pojemnik z taśmą attr i kierunek jest kolumna, kiedy rozmiar naszą przeglądarkę od dołu do góry lub gdy zmienia wysokość przeglądarce tych szt nagle zmienią, po prostu chcę, aby dodać animację do tego 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

Chociaż nie można zrobić z CSS sam, można tego dokonać przy użyciu jQuery. Patrząc na flexbox za pomocą rzędów, Flexbox zmieni wysokość, jeśli nowy wiersz zostanie utworzony lub usunięty. Wiedząc o tym, możemy dodać do strony funkcję .resize(), aby sprawdzić, czy zmiana rozmiaru okna zmieniła wysokość flexbox. Jeśli tak, możesz wykonać animację. Stworzyłem przykład: JFiddle here.

Oto kod, który czyni tę pracę:

$(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; 
    } 
    } 
}); 

Teraz z wykorzystaniem schematu flexbox kolumn, musimy wykryć, kiedy następuje zmiana szerokości. Jest to nieco trudniejsze, ponieważ szerokość flexbox zajmie maksymalną przydzieloną szerokość, ponieważ jest to domyślnie blokowy element stylu. Tak aby tego dokonać, należy albo ustawić go jako schematu flexbox inline przy użyciu display: inline-Flex, lub ustawić maksymalną szerokość dla schematu flexbox równej szerokości jego zawartość w jego największa. Po ustawieniu jednego z nich można użyć tego samego kodu, co powyżej, z wyjątkiem zmiany jego ustawień w celu wykrycia zmian szerokości w przeciwieństwie do wysokości.

Te zmiany zastosowano animację do wszystkich elementów na zmiany rozmiaru. A co jeśli chcesz zastosować go tylko do elementu, którego wiersz/kolumna się zmienia? Wymagałoby to więcej wysiłku, ale jest wykonalne. Będziesz musiał napisać wiele instrukcji if w kodzie javascript/jquery, aby wychwycić element flex, który zastosuje animację na podstawie szerokości/wysokości.