it-swarm.com.ru

CSS переход от отображения нет к отображению блока и наоборот

Я знаю, что этот вопрос, вероятно, задавался миллион раз здесь, в SO, но я пробовал большую часть решения, я просто не знаю, почему оно не работает для меня.

Итак, у меня есть раскрывающийся список с display, изначально предназначенный для none. Когда я нажимаю на него, он показывает хороший переход. (Все идет нормально). Но когда я снова нажимаю на него, чтобы скрыть выпадающий список, он сразу скрывается, но я этого не хочу. Я хочу скрыть с подобным переходом, который был назначен, чтобы показать. Вот мой код для CSS:

.dropdown-menu {
  padding: 0 0;
  display: none;
  -webkit-animation: slide-down .3s ease-out;
  -moz-animation: slide-down .3s ease-out;
}

.table-dropdown-open {
  display: block;
  -webkit-animation: slide-down .3s ease-out;
  -moz-animation: slide-down .3s ease-out;
}

@-webkit-keyframes slide-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes slide-down {
  0% {
    opacity: 0;
    -moz-transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

Это не дубликат, потому что я пытаюсь перейти от block к none. Не от none до block

7
DingDong

display ваш элемент всегда и только transition любое свойство animatable. В вашем случае opacity выглядит хорошим кандидатом, хотя игра с transform также может дать желаемый результат. Простой пример: 

any {
  transform: scale(0);
  transition: transform .4s cubic-bezier(.5,0,.3,1);
}
any.animated {
  transform: scale(1);
}

По сути, opacity и transform должны быть единственными двумя свойствами, которые вы должны анимировать, поскольку они не требуют перерисовки DOM для чего-либо, кроме анимированного элемента, таким образом, не снижая производительность браузера, даже если вы одновременно анимируете значительное количество элементов ,.

Обратите внимание, что даже если они не окрашены, ваши элементы фактически находятся в том месте, где они были бы, если не были transformed вообще. Поэтому вы можете задать им pointer-events:none, когда они находятся в состоянии "invisible", и pointer-events:all, когда они находятся в состоянии "visible", чтобы они не перехватывали события указателя во время невидимый.


Рассматривая ваш пример, я дал вам два примера анимации (с ключевыми кадрами и без). Помните, что вам нужно prefix your code . Для полной совместимости с браузером используйте > 0% в настройках (небольшая рамка внизу).

setTimeout(function(){
  var dm = document.querySelector('.dropdown-menu');
  dm.classList.remove('hide-menu');
}, 300);
/* simple animation example, on parent. No keyframes. */
.dropdown-menu.hide-menu {
  opacity: 0;
}
.dropdown-menu {
  opacity: 1;
  transition: opacity .2s cubic-bezier(.4,0,.2,1);
  position: relative;
  animation: delay-overflow .3s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.dropdown-menu:hover {
  animation: none;
  cursor: pointer;
}

/* animation example with keyframes, on child */

.dropdown-menu ul {
  position: absolute;
  margin-top: 0;
  padding-top: 1rem;
  top: 100%;
  opacity: 0;
  transform: translateY(-10%);
  animation: slide-up .3s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.drowdown-menu.hide-menu ul {
  animation-duration: 0s;
}
.dropdown-menu:hover ul {
  animation: slide-down .3s;
  animation-fill-mode: forwards;
}


@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-up {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10%);
  }
}
@keyframes delay-overflow {
  0% {
    overflow: visible;
  }
  99% {
    overflow: visible;
  }
  100% {
    overflow: hidden;
  }
}
<div class="dropdown-menu hide-menu">
  <span>Menu</span>
  <ul>
    <li>A menu item</li>
    <li>Another menu item</li>
    <li>...</li>
    <li>And so on...</li>
  </ul>
</div>

Примечание: Очень удобный трюк со свойством animation состоит в том, что он позволяет отложить применение любого свойства, даже не анимируемого, к желаемому количеству времени. Я использую этот трюк для отсрочки применения overflow:hidden к родительскому элементу (а overflow не анимируемый), поэтому анимация дочернего объекта, которая происходит за пределами родительского объекта, видна до конца. После завершения применяется overflow:hidden, и он больше не перехватывает события мыши за пределами открывателя меню.

10
Andrei Gheorghiu

это просто простая логика, в настоящее время вы установили стиль скольжения вниз, но не отменили отмену div. Сначала вы должны иметь закрытое состояние, которое, как я полагаю, в вашем случае является .dropdown-menu

.dropdown-menu {
    transition: all 500ms ease;
}

или просто использовать 

.dropdown-menu {
    transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

Если это не работает, 

0
Tsitso Makhakhe