Переходы на дисплее: свойство

В настоящее время я разрабатываю своего рода CSS "mega dropdown" меню - в основном обычный CSS-только выпадающее меню, но тот, который содержит различные типы контента.

на данный момент похоже, что переходы CSS3 не применяются к свойству "display", т. е. вы не можете сделать какой-либо переход от display: none до display: block (или любой комбинации).

может ли кто-нибудь придумать способ для меню второго уровня из приведенного выше примера "исчезать", когда кто-то зависает над одним из пунктов меню верхнего уровня?

Я знаю, что вы можете использовать переходы на visibility: свойство, но я не могу придумать способ эффективно использовать это.

Я также пытался использовать высоту, но это просто не удалось.

Я также знаю, что это тривиально, чтобы достичь этого с помощью JavaScript, но я хотел бросить вызов себе, чтобы использовать только CSS, и я думаю, что я немного короче.

все и любые предложения приветствуется.

3 ответов


вы можете объединить два или несколько переходов, и visibility это то, что пригодится на этот раз.

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}
<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

(не забудьте префиксы поставщика к transition собственность)

подробнее в в этой статье


вам нужно скрыть элемент другими средствами, чтобы заставить это работать.

я достиг эффекта, позиционируя оба <div>S абсолютно и установка скрытого в opacity: 0.

если вы даже переключать display собственность от none to block переход на другие элементы происходить не будет.

чтобы обойти это, всегда разрешайте элементу быть display: block, но скрыть элемент, регулируя любой из них значит:

  1. установить height to 0.
  2. установить opacity to 0.
  3. расположите элемент вне рамки другого элемента, который имеет overflow: hidden.

вероятно, есть больше решений, но вы не можете выполнить переход, если переключить элемент на display: none. Например, можно попытаться попробовать что-то вроде этого:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0; 
}
div.active {
    opacity: 1;
    display: block;
}

но это не работа. Из моего опыта, Я обнаружил, что это ничего не делать.

из-за этого вам всегда нужно будет сохранить элемент display: block - но вы могли бы обойти это, делая что-то вроде этого:

div {
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

во время этого сообщения все основные браузеры отключают CSS-переходы, если вы пытаетесь изменить display свойство, но CSS-анимации по-прежнему работают нормально, поэтому мы можем использовать их в качестве обходного пути.

Пример Кода:- (вы можете применить его к меню соответственно)демо

добавьте следующий CSS в таблицу стилей: -

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

затем применить fadeIn анимация для ребенка на родительском наведении: - (и, конечно, установить display: block)

.parent:hover .child {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}