Riprendi pagina animata?

Question

Sto cambiando il contenuto delle div (svanendo i vecchi contenuti, poi svanendo nuovi contenuti) e poiché sono contenuti leggermente diversi, nel momento in cui cambiano c'è una riorganizzazione stridente di tutto ciò che si trova sotto di loro.

La mia domanda è, c'è un modo per rendere fluido questo movimento?

Sospetto che praticamente l'unico modo possibile per fare ciò sia usare javascript per determinare in anticipo quali altezze (nel mio caso mi occupo solo di blocchi in cui l'allineamento verticale si sposta) degli elementi iniziale e finale sono e assegna questi valori direttamente. Una volta fatto questo, sono sicuro che la transizione CSS3 applicherà una piacevole animazione.

C'è forse un modo per ottenere questo senza specificare dimensioni esplicite? Mi sembra di ricordare ad un certo punto di aver sperimentato oggetti spostati nella pagina in modo animato. Questo mi fa sperare che possa essere fatto usando solo CSS.

Answer 1

Normalmente creo un elemento temporaneo (invisibile) contenente nuovi contenuti in modo da calcolarne l'altezza. Successivamente, l'elemento originale può essere animato dalla sua altezza attuale all'altezza appena calcolata.

È importante che l'elemento temporaneo creato è un identica fratelli dell'elemento originale in modo che tutti gli stili necessari cascata ed ottenere ereditato correttamente (ad esempio, il calcolo nuova altezza contenuti è inutile se non ha corretto font-size applicata)

Durante l'animazione tra diverse altezze impostate esplicitamente (cioè con JS come descritto sopra) può essere realizzato con CSS3 (transition: height .5s ease;), non funzionerà per diverse altezze fissati implicitamente (cioè modificando contenuto elemento con height:auto)