CSS3 сбой работает с задержкой

Question

Я хочу создать расширяемый блок с использованием css-переходов.

.box { 
    width: 300px; 
    max-height: 30px; 
    overflow: hidden; 
    background: #aaa; 
    -webkit-transition: max-height 400ms ease-in-out; 
    -moz-transition: max-height 400ms ease-in-out; 
    -ms-transition: max-height 400ms ease-in-out; 
    -o-transition: max-height 400ms ease-in-out; 
    transition: max-height 400ms ease-in-out; 
} 
.box.open { 
    max-height: 999px; 
} 

Вот рабочий пример: http://jsfiddle.net/qswgK/.

Когда я расширяю блок, он хорошо скользит вниз, но когда я хочу свернуть его, это происходит с некоторой задержкой. Это замечено в последних версиях Chrome, Firefox, Opera и IE. Почему это происходит, и я могу избежать этого без использования анимации javascript?

P.S. Если использовать высоту анимации вместо max-height, сбой работает хорошо, но мне нужно свернуть и развернуть блок с неизвестной расширенной высотой.

Answer 1

Похоже, что это происходит из-за того, что коллапсирующая анимация начинает изменять максимальную высоту с очень большого значения и требуется некоторое время, чтобы пересечь фактическую высоту элемента, и только видимое изменение высоты начинается после этого момента. Единственным обходным решением, которое я вижу, является использование отдельных анимаций для расширения и свертывания - немного более продолжительное с упрощением для первого и немного короче, которое начинается очень резко и упрощается перед окончанием для последнего, например:

.box { 
    width: 300px; 
    max-height: 30px; 
    overflow: hidden; 
    background: #aaa; 
    transition: max-height 300ms cubic-bezier(0, .6, .6, 1); /* for collapsing */ 
} 
.box.open { 
    max-height: 999px; 
    transition: max-height 400ms ease-in; /* for expansion */ 
} 

fiddle