aggiungendo animazione all'involucro flessibile

Question

quando si tratta di un punto di avvolgimento come possiamo aggiungere animazione?

forse questo può aiutare:

abbiamo un colpo di testa e dentro di tale intestazione abbiamo contenitore con flex attr e la direzione è colonna quando abbiamo ridimensionare il nostro browser dal basso verso l'alto o quando si cambia l'altezza del navigatore quelli articoli improvvisamente rimodellare, voglio solo aggiungere l'animazione a questo 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

Anche se questo non può essere fatto con i CSS solo, è possibile eseguire questa utilizzando jQuery. Quando si guarda una flexbox usando le righe, la flexbox cambierà altezza se una nuova riga viene creata o rimossa. Sapendo questo, possiamo aggiungere una funzione .resize() alla pagina per verificare se un ridimensionamento della finestra ha alterato l'altezza della flexbox. Se lo è, puoi quindi eseguire un'animazione. Ho creato un esempio JFiddle here.

Ecco il codice che fa questo lavoro:

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

Ora, con un FlexBox utilizzando le colonne, abbiamo bisogno di rilevare quando si verifica un cambiamento nella larghezza. Questo è leggermente più difficile in quanto la larghezza della Flexbox occuperà la larghezza massima assegnata in quanto è un elemento di stile di blocco per impostazione predefinita. Quindi, per fare ciò, è necessario impostarlo come un flexbox in linea usando il display: inline-flex o impostare una larghezza massima per il flexbox uguale alla larghezza del suo contenuto al suo massimo. Una volta impostato uno di questi, è possibile utilizzare lo stesso codice di cui sopra, tranne il tweaking per rilevare i cambiamenti di larghezza anziché l'altezza.

Queste modifiche hanno applicato un'animazione a tutti gli elementi su ridimensionamento. Cosa succede se si desidera applicarlo solo all'elemento la cui riga/colonna cambia? Ciò richiederebbe uno sforzo maggiore ma è fattibile. Dovresti scrivere molte istruzioni if ​​nel tuo codice javascript/jquery per catturare quale elemento flessibile applicare l'animazione in base alla larghezza/altezza.