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

Question

[我正在尝试以不同的延迟进入和退出两个过渡：特别是我想让height的img过渡在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>

我正在尝试以不同的延迟进入和退出两个过渡：特别是我试图使img的高度过渡在滚动变量设置为...之后立即开始。

Answer 1

如Alvaro所建议，问题是transitionDelay设置为0而不是“ 0s”，这是固定代码。