确定 CSS 转换的顺序

Question

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

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

单击 header 列应该会带您浏览这三个状态。

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

除了我想使用相同的 Caret 元素，然后使用 css transition's 将其从opacity: 0 到 opacity: 1 ，然后单击 rotate it 180deg 以显示下降的向下箭头，然后最后再次单击以删除排序时，我希望它淡出 WITHOUT旋转回 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控制，所以我不能在翻转变量上设置超时。

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

编辑结束

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

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

Answer 1

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

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

您可以通过多种方式做到这一点。为了演示它，在您的示例的这个分支中，我让您将 on/off 可见性设置为关闭，然后分别在 componentDidUpdate 中，我让它在关闭时进行监视，此时它等待 300 毫秒（。 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 转换的顺序

Decide order of CSS Transitions

javascript

css

css-transitions

reactjs

react-table