在 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 而不是"0"，这是固定代码。

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