动画高度属性 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 不transition-property为该height物业提供公用设施。您需要将其添加到您的tailwind.config.js文件中才能使转换生效。

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

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

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