React中使用styled-components为可折叠Div添加过渡动画的问题

嘿，这个问题我之前也踩过坑！核心原因是CSS过渡无法处理height: auto的值——浏览器没办法计算auto对应的具体像素高度，所以切换类名时直接跳变，完全没有过渡效果。

下面给你两种实用的解决方案，根据你的场景选就行：

方案1：用max-height替代height（简单易实现） #

这种方法不需要额外的JS逻辑，只需要修改styled-components的样式：

const Details = styled.div`
  // 同时过渡max-height和padding，让动画更自然
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  overflow: hidden;
  
  // 默认收起状态
  max-height: 0;
  padding: 0 0;
  
  &.open {
    // 设置一个足够大的max-height（只要比内容实际高度大就行）
    max-height: 500px;
    padding: 25px 0;
  }
`;

原理是让浏览器计算0到500px的过渡值，实现平滑展开/收起。如果不确定内容高度，给个保守的大值比如1000px就好，只要不超过页面高度，不会有问题。

方案2：动态获取内容实际高度（精确适配动态内容） #

如果你的折叠内容高度是动态变化的（比如异步加载的文本、列表），可以用ref获取内容的真实高度，再动态设置height值：

import React from 'react';
import styled from 'styled-components';

class CollapsibleDiv extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      detailsOpen: false,
      contentHeight: 0
    };
    this.detailsRef = React.createRef();
  }

  componentDidMount() {
    // 组件挂载后获取内容的实际滚动高度
    this.setState({
      contentHeight: this.detailsRef.current.scrollHeight
    });
  }

  toggleCollapse = () => {
    this.setState(prevState => ({
      detailsOpen: !prevState.detailsOpen
    }));
  };

  render() {
    const { detailsOpen, contentHeight } = this.state;
    return (
      <div>
        <button onClick={this.toggleCollapse}>
          {detailsOpen ? '收起内容' : '展开内容'}
        </button>
        <Details
          ref={this.detailsRef}
          className={detailsOpen ? 'open' : 'closed'}
          style={{ height: detailsOpen ? `${contentHeight}px` : '0' }}
        >
          {this.props.children}
        </Details>
      </div>
    );
  }
}

const Details = styled.div`
  transition: height 0.3s ease-out, padding 0.3s ease-out;
  overflow: hidden;
  padding: 0 0;
  
  &.open {
    padding: 25px 0;
  }
`;

如果是函数组件，把ref换成useRef，生命周期换成useEffect就行，逻辑是一样的。

最后提醒下：一定要明确指定过渡的属性（比如height、padding），别只写transition: all，虽然省事但可能会带来不必要的性能开销哦。

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