在TailwindCSS-Radix中实现Collapsible组件动画效果

TailwindCSS-Radix插件为开发者提供了便捷的方式来集成Radix UI组件的状态管理到TailwindCSS中。本文将详细介绍如何为Collapsible组件添加平滑的展开/折叠动画效果。

动画原理

Collapsible组件的动画效果本质上是通过CSS的height属性变化实现的。当组件展开时，高度从0增加到内容高度；折叠时则相反。Radix UI通过CSS变量--radix-collapsible-content-height提供了内容高度的动态值。

关键配置步骤

1. 定义动画关键帧： 在TailwindCSS配置文件中，我们需要定义两个关键帧动画：

   @theme {
     --animate-collapsible-down: collapsible-down 300ms var(--ease-out);
     --animate-collapsible-up: collapsible-up 300ms var(--ease-out);
   
     @keyframes collapsible-down {
       from { height: 0; }
       to { height: var(--radix-collapsible-content-height); }
     }
   
     @keyframes collapsible-up {
       from { height: var(--radix-collapsible-content-height); }
       to { height: 0; }
     }
   }
   

2. 应用动画类名： 在Collapsible.Content组件上应用对应的动画类名：

   <Collapsible.Content 
     className="radix-state-closed:animate-collapsible-up 
               radix-state-open:animate-collapsible-down 
               overflow-hidden"
   >
     {/* 内容 */}
   </Collapsible.Content>
   

注意事项

1. CSS变量命名：必须使用Radix原生的--radix-前缀变量名，而不是插件配置的rdx-前缀。插件的前缀配置仅影响状态类名。

2. 性能优化：

   • 使用overflow-hidden防止内容溢出
   • 选择合适的缓动函数(ease-out)确保动画流畅
   • 300ms的动画时长提供了良好的用户体验平衡

3. 浏览器兼容性：现代浏览器都支持这种CSS动画方式，但要注意某些旧版本浏览器可能对CSS变量支持有限。

通过以上配置，开发者可以轻松实现专业级的Collapsible组件动画效果，提升用户界面的交互体验。