动画高度属性tailwindcss

Posted 2023-03-07

【中文标题】动画高度属性tailwindcss

【英文标题】：animate height property tailwindcss

【发布时间】：2021-06-07 17:59:27

【问题描述】：

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

<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>

【参考方案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>

【讨论】：

嗨，当在我的配置中添加它时，它确实有效，但仅当从 h-0 到 h-20 时，它不适用于从 h-0 到 h-auto。知道为什么吗？

not recommended to use auto in transitions 因为浏览器的行为是不可预测的。

@juliomalves 非常感谢，这就是我的问题！