如何用Tailwind CSS实现点击按钮从左侧滑入的侧边栏过渡效果

问题原因 #

你当前的实现没有动画效果是因为使用了hidden类控制显隐，display: none不属于CSS可过渡属性，切换时无法生成过渡帧，所以无法产生平滑动画。

解决方案 #

改用CSS transform位移控制侧边栏位置，Tailwind内置了对应工具类，修改后代码如下：

// 逻辑部分保持不变即可
const handleChange = (event: React.MouseEvent) => {
  setSidebarState(!isOpened);
  onChange && onChange(event, isOpened);
};

// 样式部分修改
<div className='w-12 h-12 bg-red-700 '>
  <button onClick={handleChange}>click me</button>
  <div 
    className={`h-screen mt-5 fixed z-10 left-0 w-max transition-all duration-300 ease-in-out transform ${isOpened ? 'translate-x-0' : '-translate-x-full'}`}
  >
    ... // content
  </div>
</div>

配置说明 #

• transition-all duration-300 ease-in-out 配置了全属性过渡、300ms过渡时长、缓动效果，可根据需求调整时长数值
• -translate-x-full 会将元素沿X轴向左平移自身100%的宽度，刚好完全移出屏幕左侧，视觉上等价于隐藏
• translate-x-0 对应元素默认位置，侧边栏完全显示在屏幕左侧
• 如果你原逻辑中isOpened为true代表侧边栏隐藏，调换两个translate类的位置即可。

内容的提问来源于stack exchange，提问作者Leo Messi