@realnin

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

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

<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.. не помогает. Как сделать так, чтобы слово появлялось через некоторое время?
  • Вопрос задан
  • 1108 просмотров
Решения вопроса 1
@lnked
через opacity
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
whitysolo
@whitysolo
Если хотите использовать jquery, то .fadeIn() .fadeOut()
Ответ написан
Комментировать
L0k1
@L0k1
transition дает плавность только тем свойствам, которые имеют числовые значения (%, px..)
исходя из этого - используйте обходные пути, как вам посоветовали уже товарищи - opacity, fadeIn/Out etc..
Ответ написан
Комментировать
Есть свойство transition-delay
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы