reactjs - 动画高度属性 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 的实用程序属性(property)。您需要将它添加到您的 tailwind.config.js过渡到工作的文件。

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