确定CSS过渡的顺序

Question

虽然我敢打赌有一种巧妙的方法可以解决这个问题，但我还是有质朴的问题。

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

单击列标题将带您进入这三种状态。

starts off => click => ascending => click => descending => click => back to off

这一切都很好，很花哨，除了我想使用相同的插入符号元素，然后使用css transition's将其从opacity: 0淡入到opacity: 1，然后单击[C0 ]显示下降的向下箭头，然后最后再次单击以删除排序时，我希望它淡出不旋转返回到0度

最后一部分是问题所在。

编辑

我只在沙箱中重新创建了行为，但是我确实使用了rotate it 180deg，所以只有三种可能的状态，因为它是由程序包控制的。

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}

控制，因此我无法在翻转的变量上使用setTimeout。

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

END EDIT

我附上了一个codeandbox进行演示。首先单击显示插入符，然后单击翻转插入符，然后单击隐藏插入符。 css的设置与我的实际项目中的当前设置基本相同。

react-table

Answer 1

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

由于您正在使用React状态来处理和跟踪所有这些状态，因此您可以分别设置这两个状态，间隔时间为0.3s（因为这是CSS转换时间）。

您可以通过多种方式执行此操作。为了演示它，在您的示例的分支中，我只是将打开/关闭可见性设置为关闭，然后分别在componentDidUpdate中，让它监视何时关闭，这时它等待300ms（.3s）然后将旋转状态设置回去。

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

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

Answer 2

更改

onClick = {（）=> this.setState（{showCaret：false，flipd：false}）}

收件人

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

它应该工作。

Answer 3

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