javascript - React 中进出 CSS 转换的不同延迟

Question

我试图让两个过渡以不同的延迟进入和退出:特别是我试图让 img 的 height 过渡在之后立即开始scrolled 变量设置为 true 并且 div 的不透明度转换在 300 毫秒后开始。相反，我希望 height 转换在 scrolled 变量设置为 false 后 300 毫秒后开始，并且 opacity 转换立即开始当这种情况发生时。

使用下面的代码，当 scrolled 设置为 false 时，转换似乎按预期工作，但当它设置为 true 时它们同时开始，我错过了什么？

<div
  style={{
    height: "32px",
    opacity: scrolled ? 1 : 0,
    transition: "opacity .3s",
    transitionDelay: scrolled ? ".3s" : 0,
  }}
>
  <img
    src={logo}
    style={{
      height: scrolled ? "100%" : 0,
      transition: "height .3s",
      transitionDelay: scrolled ? 0 : ".3s",
    }}
  />
</div>

Answer 1

正如 Alvaro 所建议的那样，问题出在 transitionDelay 被设置为 0 而不是“0s”，这里是固定代码。

<div
  style={{
    height: "32px",
    opacity: scrolled ? 1 : 0,
    transition: "opacity .3s",
    transitionDelay: scrolled ? ".3s" : "0s",
  }}
>
  <img
    src={logo}
    style={{
      height: scrolled ? "100%" : 0,
      transition: "height .3s",
      transitionDelay: scrolled ? "0s" : ".3s",
    }}
  />
</div>