动画高度属性tailwindcss

Question

有没有办法为高度属性设置动画，这是我的简单代码，但高度不是动画它只是立即改变

<div>
<a className="group  flex items-center w-full pr-4 pb-2 text-gray-600 transition-transform transform rounded-md hover:translate-x-1 focus:outline-none focus:ring collapsed" onClick={() => { setSecond(!secondElement) }}>
  <span className="ml-1 text-white text-xl group"> TITLE </span>
 </a>
</div>
<div className={`transition-all duration-300 ease-in-out transform ${!secondElement ? 'h-0' : 'h-auto'} bg-blue mt-2 space-y-2 px-7`}>
 <a
    role="menuitem"
    className="block p-2 text-sm text-white transition-colors duration-200 rounded-md dark:text-light dark:hover:text-light hover:text-gray-700">1</a>
 <a
  role="menuitem"
  className="block p-2 text-sm text-white transition-colors duration-200 rounded-md dark:hover:text-light hover:text-gray-700">2</a>
   </div>
</div>

Answer 1

默认情况下，Tailwind 不为 height 属性提供 transition-property 实用程序。您需要将其添加到您的 tailwind.config.js 文件中才能进行转换。

module.exports = {
    theme: {
        extend: {
            transitionProperty: {
                height: 'height'
            }
        }
    }
}

---

从 Tailwind v3 开始，您现在可以使用 arbitrary value 即时生成一次性 transition-property，而无需更改您的 tailwind.config.js 文件。

<div class="transition-[height]">
    <!-- ... -->
</div>