CSS анимация при переходе с display:none на display:block

[volshebnyi]

Здравствуйте!

Ситуация следующая: есть навигация nav, которая в мобильной версии исчезает с помощью display:none. С помощью JavaScript переключаю свойство display на block. Естественно, все это происходит резко - появление и исчезновение меню. Можно ли сделать плавное появление меню средствами CSS анимации? Погуглил - пишут что на display анимация не распространяется. Но все же, может Мастера подскажут...

Заранее благодарю за помощь! 

[Dlynnyj]

А можна и так

https://jsfiddle.net/Dlynnyj/m06738bz/

 

transition-property: margin-top;
transition-delay: 0.3s;

 

Edited April 2, 2016 by Dlynnyj

[Vlad_P]

.fadeIn() того ж Jquery

[volshebnyi]

да и .slideToggle() есть в jQuery. Но дело в том, что меня интересует нативный JavaScript и CSS...

[Launder]

@volshebnyi, конечно можно, transition работает с visibility: hidden в паре с opacity: 0, и, соответственно, visibility: visible и opacity: 1 для видимости. Если использовать только opacity, то "включаться" будет и тогда, когда наведёшь мышкой на "пустое" пространство из которого "выплывает" меню.

Вот пример, и ещё один.

[volshebnyi]

В моем случае, нужен переход от display: none, а не от visibility: hidden...

[wwt]

1 час назад, volshebnyi сказал:

В моем случае, нужен переход от display: none, а не от visibility: hidden...

свойство display не анимирутся, зато анимируется свойство opacity используйте их в паре.

[Melodyn]

Например:

https://jsfiddle.net/0gp230pu/

[pamavik]

А ещё можно анимировать высоту с 0 до height, например: 100%.

[Launder]

В 01.04.2016 в 00:28, Dlynnyj сказал:

А можна и так

https://jsfiddle.net/Dlynnyj/m06738bz/

Решение красивое, а зачем в нём div class=overlay, а также class="close" у тега <a>?

[Dlynnyj]

8 часов назад, Launder сказал:

Решение красивое, а зачем в нём div class=overlay, а также class="close" у тега <a>?

Копи-паст зло :-))

Код вырван из текстов где много кнопок потому и клас Баттон

А вот оверлей в том же коде насколько помню делал закрытие окна при нажатии на затененную область