使用TailwindCSS实现下拉卡片平滑动画：高度过渡失效问题排查

问题根源 #

你当前用h-0和h-full控制展开/收起，但h-full依赖父元素高度，而父元素是flex容器，高度由内容动态决定——浏览器无法计算从固定高度h-0到不确定高度h-full的过渡动画，因此只有透明度变化生效，高度会瞬间切换。

修复方案 #

改用max-h-0和max-h-[足够容纳内容的数值]实现高度过渡，因为max-height支持在固定值之间的平滑动画，即使内容实际高度不确定，只要max-h的上限足够大，就能模拟自然的展开/收起效果。

修改后的组件代码：

import React, { useState } from 'react';
import LazyImage from './LazyImage';

export default function ProjectCard({ isOrientationStart, project }) {
  const [isExpand, setIsExpand] = useState(false);

  return (
    <div className='flex flex-col items-center justify-center bg-dark-slate m-10 rounded-3xl p-5 duration-300 hover:bg-opacity-80 hover:scale-90'>
      <h1 className='text-white font-bold text-xl'>{project.title}</h1>
      <div
        className={`flex flex-col transition-all duration-500 ease-out ${
          isOrientationStart ? 'md:flex-row' : 'md:flex-row-reverse'
        } w-full justify-center items-center overflow-hidden ${
          isExpand ? 'max-h-[2000px] opacity-100' : 'max-h-0 opacity-0'
        }`}>
        <div className='grid grid-cols-2 gap-4 max-w-sm p-6 rounded-xl'>
          <LazyImage
            className='rounded-xl border-4 border-orange'
            src={project.img1}
            alt='Project image 1'
          />
          <LazyImage
            className='rounded-xl border-4 border-orange'
            src={project.img2}
            alt='Project image 2'
          />
          <LazyImage
            className='rounded-xl border-4 border-orange'
            src={project.img3}
            alt='Project image 3'
          />
          <LazyImage
            className='rounded-xl border-4 border-orange'
            src={project.img4}
            alt='Project image 4'
          />
        </div>
        <div className='text-black font-extralight text-lg p-10 bg-zinc-300 rounded-xl'>
          <p>{project.description}</p>
        </div>
      </div>
      <i
        onClick={() => setIsExpand(!isExpand)}
        className={`fa-solid cursor-pointer fa-chevron-down text-4xl duration-500 hover:scale-110 hover:animate-bounce ${
          isExpand ? 'text-white' : 'text-orange'
        }`}
      />
    </div>
  );
}

关键修改说明 #

• 移除h-0/h-full，替换为max-h-0（收起）和max-h-[2000px]（展开），可根据你的内容实际高度调整这个数值，只要确保它大于内容的最大可能高度即可。
• 保留overflow-hidden，用于隐藏超出max-h范围的内容，配合max-h的过渡实现平滑动画。
• 保留透明度过渡，和高度动画同步，提升整体视觉连贯性。

内容的提问来源于stack exchange，提问作者André Gomes