Jak usunąć opóźnienie w Css3 Wysunięcie przejścia, które używa przejścia o maksymalnej wysokości

Question

Mam problem z przejściem, którego używam do przesuwania panelu.

Proszę spojrzeć na poniższy jsbin http://jsbin.com/uvejuj/1/

Zauważ, że gdy klikam przycisk przełączania po raz pierwszy przejście następuje natychmiast.

Jeśli jednak ponownie kliknę przycisk, aby zamknąć, to przejście opóźnia czas przejścia przed jego wykonaniem.

Co powoduje opóźnienie przy zamykaniu i jak mogę się go pozbyć?

Dzięki

Answer 1

To dlatego jesteś animowania wysokości pomiędzy 0 a max 1000px, ale treść jest tylko o 120 pikseli wysoka. Opóźnienie to animacja na 880 pikseli, których nie widać.

Albo ustaw wysokość-max na znaną wysokość zawartości (jeśli wiesz - przykład: http://jsbin.com/onihik/1/) lub wypróbuj inną metodę. Może coś roztworu opóźnienia https://stackoverflow.com/a/6486082/2619379

Answer 2

Fixed JS Bin

wyznaczyć:

umieścić sześciennych beziera (0, 1, 0, 1) funkcja przejścia dla elementu.

.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; 
}