Почему мой переход с CSS3 задерживается до его запуска?

Question

Либо я неправильно понял, как он работает, либо просто не работает. У меня есть следующий CSS:

transition-property: max-width; 
transition-timing-function: linear; 
transition-duration: 5s; 
transition-delay: 0s; 

Что я ожидаю, так это то, что когда я нажимаю кнопку, переходы начинаются и заканчиваются через 5 секунд.

Случается, что после того, как я нажал на кнопку, она задерживается примерно на 3,5 секунды до начала перехода, и переход длится около 1,5 секунд. Итак, всего за 5 секунд.

Если я использую transition-timing-function: ease-in;, он задерживается около 4,5 секунд до начала перехода.

Я следующие the transition guide here.

Что я могу сделать, чтобы переход начался с момента нажатия кнопки, а затем для продолжения в течение 5 секунд?

Answer 1

Задержка, которую вы видите, - это, вероятно, время, необходимое для анимации значений, которые не приводят к визуальному изменению. В зависимости от разницы это может привести к значительной задержке визуальной анимации. Вот почему max/min width/height часто избегают при выполнении переходов.

Пример концепции:

В приведенном ниже фрагменте, коробка имеет высоту 600px и максимальную высоту-1000px. Чтобы анимация изменила максимальную высоту до 200 пикселей, она должна пройти 400 пикселей пробела, прежде чем вы увидите изменение. Это и вызывает «задержку».

document.getElementById('change').addEventListener('click', function(){ 
 
    document.getElementById('box').className = 'box short'; 
 
});

.box{ 
 
    margin:20px; 
 
    width:200px; 
 
    background:red; 
 
    height:600px; 
 
    max-height:1000px; 
 
    transition: max-height 5s linear; 
 
} 
 

 
.box.short{ 
 
    max-height:200px; 
 
}

<button id="change">Change Max Height</button> 
 

 
<div id="box" class="box"></div>