javascript - 决定 CSS 过渡的顺序

Question

我遇到了一个奇怪的问题，尽管我打赌有一个巧妙的方法可以解决它。

情况是我有一个具有三列排序状态的表:完全未排序，在这种情况下我不希望出现任何图标，按升序排序，在这种情况下我想要一个向上箭头，以及按降序排序，在这种情况下我想要向下箭头。

单击列标题应该会带您经历这三种状态。

开始=>点击=>升序=>点击=>降序=>点击=>返回关闭

这一切都工作得很好，除了我想使用相同的 Caret 元素，然后使用 css 过渡 将其从 opacity: 0 淡入淡出> 到 opacity: 1 ，然后单击旋转 180deg 以显示降序的向下箭头，最后当再次单击以删除排序时，我希望它淡出不旋转回0°

最后一部分是问题所在。

编辑

我只在沙箱中重新创建了行为，但我实际上使用的是react-table，因此只有三种可能的状态，因为它是由包控制的:

initial state: {showCaret: false, flipped: false}
first click: {showCaret: true, flipped: false}
second click: {showCaret: true, flipped: true}
third click, back to initial: {showCaret: false, flipped: false}

状态变化由react-table控制，所以我无法在翻转的变量上设置Timeout。

如果可能的话，我正在寻找一种纯粹的 CSS 方法来实现此目标，而无需操纵状态更改的方式

结束编辑

我附上了一个codesandbox来演示。首先单击“显示插入符号”，然后单击“翻转插入符号”，然后单击“隐藏插入符号”。 css的设置与我目前在实际元素中的设置基本相同。

https://codesandbox.io/embed/admiring-rain-svsc9?fontsize=14&hidenavigation=1&theme=dark

Answer 1

听起来您想要的是箭头消失，但在消失时不要旋转回其起始方向。

由于您正在使用 React 状态处理和跟踪所有这些，因此您可以单独设置这两个状态，间隔 0.3 秒(因为这是您的 CSS 转换时间)。

您可以通过多种方式做到这一点。为了演示这一点，在您的示例的这个分支中，我只需将开/关可见性设置为关闭，然后单独在 componentDidUpdate 中，我让它在关闭时进行监视，此时它会等待 300 毫秒(0.3 秒)然后将旋转状态设置回来。

componentDidUpdate(oldProps, oldState) {
    if (oldState.showCaret && !this.state.showCaret) {
      //it was just hidden
      setTimeout(() => {
        this.setState({
          flipped: false
        });
      }, 300);
    }
}

https://codesandbox.io/s/sparkling-pine-9igec

编辑，仅使用 CSS 解决方案

https://codesandbox.io/s/pensive-wilbur-opxzf

/* flipped taking care of rotating the img tag */
.image {
  transition: transform 0.3s linear 2s;
}
.flipped {
  transform: rotate(180deg);
  transition: transform 0.3s;
}