Как сделать плавный переход в display:block?

Question

[realnin]

Ситуация такая.

<div class="mp-level mp-level-open">
<h2> MENU </h2>
<li>подменю</li>
</div>

В css

.mp-menu > .mp-level h2 {
    display: none;
}

Как видно, слово МЕНЮ по умолчанию скрыто.
При нажатии на подменю, подменю идет сверху страница вниз, т.е перекрывает основное меню(через js, к блоку добавляется стиль mp-level-overlay ), и появляется слово меню

<div class="class="mp-level mp-level-open mp-level-overlay"">
<h2> MENU </h2>
<li>подменю</li>
</div>

.mp-menu .mp-level.mp-level-overlay > h2, .mp-level.mp-level-overlay > h2 {
    display: block !important;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;

Но проблема в том, что слово МЕНЮ появляется слишком быстро, т.е подменю не успевает занять свое место, а там уже слово меню появляется, пробовал и 2 и 10 секунд в transition.. не помогает. Как сделать так, чтобы слово появлялось через некоторое время?

Comments

[Сергей Сергей]

b
bl
blo
bloc
block

Answer 1

[lnked]

через opacity

Comments

[Sergeniy]

1. opacity:0;visibility:hidden;
2. opacity:1;visibility:visible;
3. transition оставь для красоты

Answer 2

[whitysolo]

Если хотите использовать jquery, то .fadeIn() .fadeOut()

Answer 3

[L0k1]

transition дает плавность только тем свойствам, которые имеют числовые значения (%, px..)
исходя из этого - используйте обходные пути, как вам посоветовали уже товарищи - opacity, fadeIn/Out etc..

Answer 4

[Иван Орлов]

Есть свойство transition-delay