Нежелательная задержка CSS при установке длительности перехода

Question

Я хочу, чтобы меню закрывалось в тот же промежуток времени, что и для его открытия. По какой-то причине перед закрытием происходит задержка, а также показывается некоторое дополнительное пространство, о котором я не знаю, откуда оно взялось.

Вот jsfiddle: https://jsfiddle.net/m9pd8bjh/7/

Вот код CSS в случае, если вы видите что-то неправильно сразу:

.hide { 
    visibility: hidden; 
    overflow: hidden; 
    max-height: 0; 
} 

input[type=checkbox]:checked~.toggleable { 
    visibility: visible; 
    overflow: visible; 
    max-height: 1000px; 
} 

.toggleable { 
    transition: visibility 5s ease-in-out, overflow 2.5s ease-in-out, max-height 2.5s ease-in-out; 
} 

Я использую комбинацию Флажок-метки, чтобы вызвать открытие и закрытие меню.

Answer 1

Первое, что вы должны понять, что visibility свойство в CSS не могут быть анимированными. Это связано с тем, что у него есть только два состояния (либо видимые, либо скрытые, ничто между ними для облегчения анимации).

Если вы хотите сделать эффект постепенного изменения, вы можете использовать opacity:0; в opacity:1; и дать вместо этого переход.

Следующее, что нужно отметить, это то, что время анимации очень длительное, и если вы анимируете max-width, вам нужно сократить время анимации для настройки.

См скрипку: https://jsfiddle.net/m9pd8bjh/12/

И CSS:

.toggleable { 
    transition: max-height 0.25s ease-in-out; 
} 

Если вы специально хотите, чтобы долго анимации временные рамки, то вам придется использовать что-то другое, чем решение макс высоты.

Это стало бы новым проспектом, так как вам нужно будет использовать JavaScript, jQuery или какую-либо другую такую ​​инфраструктуру.

Для дальнейшего использования, здесь скрипку делать то же самое с помощью JQuery: https://jsfiddle.net/m9pd8bjh/15/

А вот код JQuery:

$('.toggler').click(function(){ 
    $('.hide').slideToggle(); 
}); 

Answer 2

Я добавляю еще один переход, когда вы закрываете меню, и я удалял начальный запас элемента ul. Это хорошо для вас?

код CSS изменен

.hide { 
    visibility: hidden; 
    overflow: hidden; 
    max-height: 0; 
    transition: visibility 0.5s ease-in-out, overflow 0.5s ease-in-out, max-height 0.5s ease-in-out; 
} 
#menu-main { margin: 0; padding: 10px 40px } 

input[type=checkbox]:checked ~ .toggleable { 
    visibility: visible; 
    overflow: visible; 
    max-height: 1000px; 
    transition: visibility 2.5s ease-in-out, overflow 2.5s ease-in-out, max-height 2.5s ease-in-out; 
} 

See this fiddle