Как сделать, чтобы меню закрывалось медленнее, чем открывалось?

Question

[webrapist]

К примеру, меню открывается за 1 секунду при наведении. После того, как убрали мышь с блока, должна быть задержка, к примеру, в 3 секунды, и после этого меню должно мгновенно закрыться.

Можно как-то реализовать с помощью transition?

.menu {
...
height: 200px;
transition: all 1s;
}

.menu:hover {
height: 600px;
}

Comments

[webrapist]

Никто не подскажет почему нет подсветки кода? Тег правильный вставил.

Answer 1

[Денис Инешин]

Нет, потребуется минимум JS чтобы добавить дополнительный CSS-класс с другим таймингом.

Upd: был не прав, в некоторых случаях можно: https://jsfiddle.net/IonDen/hphzyy6u/

Comments

[webrapist]

Да, кстати, а что скажете на счёт этого? Отрывок из книги:

"One problem with drop-down menus in CSS is that they usually disappear very quickly
if you accidentally mouse off the menu. However, you can make the menu appear quickly but disappear slowly
using the transition-delay property. To do so, you add the following code to the original style:
transition-delay: 5s;
Then add no delay to the :hover style:
transition-delay: 0;
It’s somewhat counterintuitive, but this code basically makes the :hover transition happen immediately, with
no delay. But to return to the regular style (where the menu disappears) takes 5 seconds. During that time, a
visitor has enough time to move his errant mouse back over the menu before it disappears."

Пробовал сейчас такое сделать - не работает как надо. К чему это вообще написано, так раньше можно было делать или что?

[Денис Инешин]

swibong: вы правы, работает

[Денис Инешин]

https://jsfiddle.net/IonDen/hphzyy6u/

[webrapist]

Денис Инешин: Только сейчас понял логику сего действия. Спасибо за код.