Javascript 决定CSS转换的顺序

我遇到了一个令人毛骨悚然的问题，尽管我打赌有一个巧妙的方法来解决它

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

单击列标题将引导您了解这三种状态

开始=>单击=>上升=>单击=>下降=>单击=>返回关闭

除了我想使用相同的插入符号元素，然后使用css转换的将其从

opacity:0

淡入

opacity:1

，然后单击

将其旋转180度

以显示向下箭头，然后再次单击以删除排序，我希望它在不旋转回0度的情况下淡出

最后一部分就是问题所在

编辑

我只在沙箱中重新创建了该行为，但实际上我使用的是

反应表

，因此只有三种可能的状态，因为它是由包控制的：

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

控制，因此我无法对翻转的变量设置超时

我正在寻找一种纯粹的CSS方法来实现这一目标，如果可能的话，不需要操纵状态的变化方式

结束编辑

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

---

听起来你想要的是箭头消失，而不是在它消失时旋转回起始方向

由于您使用React state处理和跟踪所有这些，所以您可以将这两个状态分别设置为timed.3s（因为这是您的CSS转换时间）

你可以通过多种方式来实现这一点。为了演示这一点，在您的示例的这个分支中，我让您将开/关可见性设置为关，然后分别在componentDidUpdate中，让它观察何时关闭，在该点等待300ms（.3s），然后将旋转状态设置回原位

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

编辑，仅使用CSS解决方案

改变

onClick={（）=>this.setState（{showCaret:false，flipped:false}） 到

onClick={（）=>this.setState（{showCaret:false}）

---

它应该可以工作。

我很抱歉造成混淆-状态更改的方式是由我使用的包react表外部控制的。我无法设置翻转的超时，因为它们同时在我无法控制的情况下更改。见编辑-谢谢！哦，我明白了。那不清楚，但我明白你现在说的。幸运的是，有一个CSS转换延迟属性。见上述解决方案。请注意CSS规则的顺序很重要，因为具有相同的特殊性并使用相同的属性。第二次（2s）为延迟值。

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

onClick={() => this.setState({ showCaret: false, flipped: false })} onClick={() => this.setState({ showCaret: false })}