Как правильно использовать transition?

294

28 июля 2017, 01:44

Здравствуйте. Делаю меню под телефон. Чтобы было красивое появление, хочу добавить динамики.

.menu-phone > li {
  display: none;
  transition: 2s;
  opacity: 0;
}
.menu-phone:active li {
  display: block;
  opacity: 1;
}
.menu-phone:hover li {
  display: block;
  opacity: 1;
}

Но листы все равно сразу видны, не срабатывает transition: 2s;. Пока не добавлял

.menu-phone:hover li {
  display: block;
  opacity: 1;
}

то они срабатывали в обратную сторону (исчезали), но без hover лист тогда сразу исчезает обратно.

Answer 1

transition свойство не работает на свойство display:block\none; ! Используйте без него или используйте visibility: hidden, так же можно играть с высотой

Пример на jsFiddle

.parent { 
  width: 100px; 
  height: 100px; 
  background: #000; 
  overflow: hidden; 
} 
 
.child { 
  visibility: hidden; 
  width: 50px; 
  height: 0px; 
  background: violet; 
  transition: all 1s; 
  opacity: 0; 
} 
 
.parent:hover .child { 
  visibility: visible; 
  height: 50px; 
  opacity: 1; 
}

<div class="parent"> 
  <div class="child"> 
  </div> 
</div>

Answer 2

Попробуйте так

.menu-phone > li {
  display: none;
  transition: 2s;
  opacity: 0;
}
.menu-phone:active li {
  display: block;
  transition: 2s;
  opacity: 1;
}
.menu-phone:hover li {
  display: block;
  transition: 2s;
  opacity: 1;
}