Блог

Я пытаюсь создать простой компонент. При нажатии кнопки отображается меню, которое должно выдвигаться слева. При повторном нажатии он должен скользить справа. Это выглядит следующим образом.

Я использовал следующее в качестве моего enter , enterActive , leave , и leaveActive (соответственно).

 .open {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: all 200ms ease-in;
}

.opened {
  opacity: 1;
  transform: scaleX(1);
}

.close {
  opacity: 1;
  transform: scaleX(1);
  transform-origin: right;
  transition: all 200ms ease-in;
}

.closed {
  opacity: 0;
  transform: scaleX(0);
}
  

Здесь есть рабочий codepen, чтобы показать проблему.

Чего я не понимаю: как мне заставить анимацию закрытия начинаться справа и перемещаться влево при закрытии? Казалось transform-origin , что это правильный CSS, но он работал не так, как предполагалось. Начальная анимация открытия была правильной, но не анимация выхода.