类更改时反转单样式组件关键帧动画

给定一个样式化的组件关键帧声明,如下所示:

const openAnimation = keyframes`
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
`
const closeAnimation = keyframes`
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
`

假设我有一个反应组件 className 我可以切换到的属性 closing 如果我愿意;我会弹钢琴 openAnimation 一开始 closeAnimation 上课的时候 结束 这样地:

const OpeningOrClosing = styled.div`
  animation: ${openAnimation} 200ms ease-out both;

  &.closing {
    animation: ${closeAnimation} 200ms ease-out both;
  }
`;

然而,我不得不定义这一点似乎很奇怪 二 为此设置关键帧动画,它们基本上是彼此相反的。

我对 animation-direction 这应该会起作用,但不起作用:

const OpeningOrClosing = styled.div`
  animation: ${openAnimation} 200ms ease-out both;

  &.closing {
    /* Does not work, nothing is animated when the class is set */
    animation-direction: reverse;
  }
`;

我错过什么了吗?

或者,是否至少有一种方法可以定义 keyframes 动画是现有动画的“反面”?