在CSSTransitionGroup上更改`transform-origin`不能按预期运行

Question

我正在尝试制作一个简单的组件。按下按钮时，它将显示一个应从左侧滑出的菜单。再次单击时，它应从右侧滑入。它看起来如下。

我使用以下内容作为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);
}

有一个工作的代码集here来显示问题。

我不能得到的是：如何从右侧开始关闭动画，在关闭时向左移动？似乎transform-origin是正确的CSS，但它没有按预期工作。初始打开动画是正确的，但不是离开动画。