使用 Tailwind 動畫垂直步進器

Question

我非常接近在 Tailwind 中構建一個動畫垂直步進器，但是，我無法弄清楚如何在保留 animation 的同時使每個單獨步驟的高度與內容的高度相匹配，我本以為 h-fit (而不是 h-16) 可以解決問題，但出於某種原因。 animation 在這種情況下停止工作。

可以在這里找到功能性沙箱！ https://codesandbox.io/s/still-grass-8gxu0q?file=/src/App.tsx

非常感謝您提供的任何幫助和見解！

這是給我帶來麻煩的代碼部分：

<div
    className={`overflow-y-hidden h-0 mt-5 transition-all ease-in-out duration-1000 flex flex-col border border-white ${
      stepIdx === currentStep ? "h-16" : ""
    }`}
  >
    <div
      className={`${
        isCurrent(stepIdx) ? "text-white" : "text-gray-500"
      } mb-5`}
    >
      {step.description}
    </div>
  </div>
  {isCurrent(stepIdx) ? (
    <Buttons handleNext={handleNext} handleBack={handleBack} />
  ) : (
    ""
  )}
</div>

Answer 1

我想到了; 但是，CSS 不建議在動畫中使用非固定高度。 解決方法是改用最大高度。

這是一個可用的沙盒，以防將來有人需要幫助： https://codesandbox.io/s/still-grass-8gxu0q?file=/src/App.tsx