Почему не работает css transition при removeClass()?

Question

[nickostyle]

Вообщем, есть банальный скрипт. Блоку добавляется класс .active, при этом анимация происходит. Потом удаляется класс, но анимации нет, хотя в ксс она прописана. Показываю

$menu_trigger.on('click', function(event){
$overlay.toggleClass('active');
});

$overlay.on('click', function(event){
$(this).removeClass('active');
});

При клике на иконку появляется менюшка. Там все окей, причем анимация работает в обе стороны ( и на открытие, и на закрытие). Потом по такому же принципу я делаю блок overlay, который появляется при клике.

.menu-content-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background: #000;
  transition: left 0.4s, opacity 0.6s;
}

.menu-content-overlay.active {
  left: 300px;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0.3;
  transition: left 0.4s, opacity 0.6s;
}

Оверлей сдвигается вместе с контентом, который перекрывает, плюс прозрачность. Но при закрытии меню анимации у оверлея нет.

Comments

[Alexander]

Попробовал повторить ваш пример - в фф работает jsfiddle.net/gs2zvtp8

Answer 1

[Андрей Гончаров]

z-index не анимируется! Он сразу меняется на итоговое значение и оверлей уходит назад, где и происходит его анимация, но мы ее не видим. В последенее время я делаю так:

.block{
  opacity: 0;
  pointer-events: none;
}
.block.visible{
  opacity: 1;
  pointer-events: all;
}

Pointer-events не поддерживается оперой 12, но мне на нее плевать короч.