javascript - React中CSS过渡的不同延迟

我试图以不同的延迟进入和退出两个过渡：特别是我试图使height的img过渡在scrolled变量设置为true和不透明度过渡后立即开始在发生这种情况后的300毫秒后开始div的时间。相反，我希望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>

最佳答案

正如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>