Laggy переход только в одном направлении

Question

Я создал простой, чистый CSS, выпадающее меню. Я столкнулся с проблемой с большим отставанием. Когда меню катится вниз, переход идет гладко, но в противоположном направлении перед анимацией начинается отставание в 1 секунду.

HTML:

<input type="checkbox" id="switch" name="switch"> 
<label for="switch" id="switch-button">Click me!</label> 

<div id="txt"> 
<p>Menu element 1</p> 
<p>Menu element 2</p> 
<p>Menu element 3</p> 
<p>Menu element 4</p> 
</div> 

CSS:

#switch  { display: none; } 
#switch-button { display: block; } 
#txt   { max-height: 400px; } 

#switch ~ #txt { 
    transition: 1s max-height 0s; 
} 
#switch:not(:checked) ~ #txt { 
    max-height: 0px; 
    overflow: hidden; 
} 
#switch:checked ~ #txt { 
    max-height: 400px; 
} 

https://jsfiddle.net/s1237n9h/8/

Проблема возникает в: Chrome, Firefox, Android браузера, Edge.

Answer 1

Задержка связана с тем, что вы переход от max-height: 400px к max-height: 0 но ваш контейнер имеет только 72px в высоту.

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

Answer 2

Добавить transition-delay: -.5s; в

#switch:not(:checked) ~ #txt { 

Результат:

#switch:not(:checked) ~ #txt { 
     max-height: 0px; 
     overflow: hidden; 
     width: 100%; 
     -webkit-transition: 1s max-height 0s; 
     -moz-transition: 1s max-height 0s; 
     transition: 1s max-height 0s; 
    transition-delay: -.5s; 
    } 

Answer 3

Проблема заключается в том, что вы используете max-height, чтобы попытаться контролировать высоту выпадающего списка, чтобы он был только высок, так как он должен отображаться в пунктах меню. В этом случае он отображается как 72px. Тем не менее, браузер все еще пытается сделать переход на max-height400px.

Когда меню открывается, переход не выглядит лагги, потому что он начинается сразу, но время, которое браузер рассчитывает для завершения перехода, фактически основан на max-height400px. Вот почему переход выглядит так, как будто это происходит «быстрее», чем 1 секунда, потому что он показывает главное меню 72px примерно за четверть секунды, а затем перекрывает высоту элемента, но переход продолжается после этого до 400px. Обратное выглядит лагги, потому что браузер фактически пытается «спрятать» пиксели от 400 до 72, прежде чем скрывать фактический визуализируемый элемент.

Сравните свою версию с этим ниже, где переход занимает 5 секунд. Нажмите, чтобы открыть меню, а затем подождите 5 секунд. Затем нажмите, чтобы закрыть его. Вы увидите, что переход не начинается, пока не пройдет около 4 секунд. В течение этого времени переход происходит из пикселей с 400 по 72, а затем визуализируемый элемент скрывается примерно через 1 секунду.

JS Fiddle with 5s transition

Если вы делаете это с чистой высоты (не то, что вы хотите, так как он не будет контролировать высоту <div>) вы будете видеть все работает нормально.

JS Fiddle with height transition

Так, чтобы ответить на ваш вопрос, переход не лага, но при попытке перейти только max-height таким способом делает вид, что путь.