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

【问题标题】：Different delays for in and out CSS transition in ReactReact 中进出 CSS 转换的不同延迟
【发布时间】：2019-09-17 21:37:13
【问题描述】：

我正在尝试以不同的延迟进入和退出两个转换：特别是我试图让 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>

【问题讨论】：

transitionDelay 应该是未定义的或字符串，因此请尝试将 0 更改为 "0s" 看看是否有帮助。
很高兴你能解决它

标签： javascript html css reactjs

【解决方案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>

【讨论】：