Question

虽然我敢打赌有解决这个问题的灵巧方法，但我还是有个笨拙的问题。

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

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

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

除了我要使用相同的Caret元素，然后使用 css转换的将其从opacity: 0淡入到{{1 }}，然后单击opacity: 1以显示下降的向下箭头，然后最后再次单击以删除排序时，我希望它淡出不旋转回到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的设置与我的实际项目中的我的设置基本相同。

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

Answer 1

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

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

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

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;
}

Answer 2

更改


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

收件人


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

它应该可以工作。

确定CSS过渡的顺序

2 个答案: