Tailwind CSS实现Div显示隐藏动画的问题求助

核心问题 #

你当前通过{show && ...}直接挂载/卸载元素的写法，会导致DOM元素被直接添加或移除，Tailwind的transition类没有生效的时机，自然看不到动画效果。

具体方案 #

方案1：透明度+缩放的淡入淡出动画

始终渲染目标元素，通过切换Tailwind类控制可见性与动画状态，同时处理交互干扰：

import * as React from "react";
import "./styles.css";

export default function App() {
  const [show, setShow] = React.useState(false);
  return (
    <div className="bg-gray-500 relative min-h-screen">
      <button onClick={() => setShow(!show)}>toggle display</button>
      <div className={`absolute inset-x-0 top-0 origin-top-right transform p-2 transition-all duration-1000 ease-out ${show ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'}`}>
        this should animate now
      </div>
    </div>
  );
}

• 父容器添加relative，确保子元素absolute定位基于父容器（原代码缺失此属性，定位会异常）
• 用opacity和scale属性实现动画，通过show状态切换对应类
• 隐藏时添加pointer-events-none，避免不可见元素干扰页面交互

方案2：带高度变化的展开/收起动画

如果需要下拉展开的高度动画，可用max-height模拟（height:auto无法直接过渡）：

import * as React from "react";
import "./styles.css";

export default function App() {
  const [show, setShow] = React.useState(false);
  return (
    <div className="bg-gray-500 relative min-h-screen">
      <button onClick={() => setShow(!show)}>toggle display</button>
      <div className={`absolute inset-x-0 top-0 origin-top-right transform p-2 transition-all duration-1000 ease-out overflow-hidden ${show ? 'opacity-100 max-h-96' : 'opacity-0 max-h-0 pointer-events-none'}`}>
        this should animate with height transition
      </div>
    </div>
  );
}

• 用max-height替代height，设置足够容纳内容的最大值（比如max-h-96）
• 配合overflow:hidden，隐藏时max-h-0截断超出部分，实现收起效果

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