Come rimuovere il ritardo su Css3 Passaggio di transizione che utilizza la transizione di altezza massima

Question

Ho riscontrato un problema con una transizione che sto utilizzando per far scorrere un pannello dentro e fuori.

Si prega di dare un'occhiata al seguente jsbin http://jsbin.com/uvejuj/1/

noti che quando clicco sul pulsante di commutazione per la prima volta la transizione avviene immediatamente.

Tuttavia, se faccio nuovamente clic sul pulsante per chiudere, la transizione ritarda il tempo di transizione prima che venga eseguito.

Che cosa sta causando il ritardo in chiusura e come posso liberarmene?

Grazie

Answer 1

È perché si sta animando altezza tra 0 e 1000px max, ma il contenuto è alta solo circa 120px. Il ritardo è l'animazione che si verifica sugli 880 pixel che non puoi vedere.

O impostare l'altezza massima all'altezza nota del contenuto (se lo si conosce - esempio: http://jsbin.com/onihik/1/) o provare un metodo diverso. Forse qualcosa di simile soluzione ritardo https://stackoverflow.com/a/6486082/2619379

Answer 2

Fixed JS Bin

Fix:

Mettere cubo-Bezier (0, 1, 0, 1) funzione di transizione per l'elemento.

.text { 
    overflow: hidden; 
    max-height: 0; 
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); 
    &.full { 
    max-height: 1000px; 
    transition: max-height 1s ease-in-out; 
}