1

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

.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 лист тогда сразу исчезает обратно.

2
  • 1
    добавьте html, не ясно на что нужно наводить, если элемент пустой, так как внутри него вы все скрыли
    – kizoso
    26 июл 2017 в 8:21
  • пример - jsfiddle.net/soledar10/3eqdby4s
    – soledar10
    26 июл 2017 в 8:31

2 ответа 2

3

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>

0
1

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

.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;
}
1
  • попробовал - не сработало 26 июл 2017 в 8:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.