CSSTransition的transition duration失效问题求助

我帮你梳理下问题所在，以及对应的修复方案：

问题根源分析 #

1. 动画触发逻辑不完整：你只做了显示元素的触发，但没有提供隐藏逻辑，导致退出动画完全没机会执行；CSSTransition需要in属性在true/false间切换，才能完整触发进入/退出流程。
2. 类名冲突干扰样式：你的元素本身加了birthday-input类，和CSSTransition生成的-enter/-enter-active等过渡类名叠加后，破坏了初始动画样式的生效。
3. CSS属性缺失+时长不匹配：没有添加overflow: hidden，max-height变化时内容溢出会让动画看起来失效；同时CSSTransition的timeout值和CSS里的transition时长不一致，容易导致组件提前卸载。

修改后的完整代码 #

component.jsx #

let { CSSTransition, TransitionGroup } = ReactTransitionGroup;

class Example extends React.Component {
  state = {
    show: false,
  };

  render() {
    return (
      <div>
        {/* 改成切换show状态的逻辑，支持显示/隐藏两种操作 */}
        <button onClick={() => this.setState({ show: !this.state.show })}>
          {this.state.show ? 'Hide' : 'Show'}
        </button>
        <CSSTransition
          in={this.state.show}
          timeout={1000} // 和CSS transition时长保持一致
          classNames="birthday-input"
          unmountOnExit // 动画结束后自动卸载组件
          appear
        >
          {/* 移除元素本身的birthday-input类，避免和过渡类名冲突 */}
          <div className="form-group">
            <h1>HEADER</h1>
          </div>
        </CSSTransition>
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

component.scss #

.birthday-input-enter {
  max-height: 0;
  overflow: hidden; // 添加该属性裁剪溢出内容，保证动画视觉效果
}

.birthday-input-enter-active {
  max-height: 1000px;
  transition: max-height 1s ease; // 使用标准写法，现代浏览器无需前缀
}

.birthday-input-exit {
  max-height: 1000px;
  overflow: hidden;
}

.birthday-input-exit-active {
  max-height: 0;
  transition: max-height 1s ease;
}

关键修改说明 #

• 完善触发逻辑：按钮点击切换show状态，让进入和退出动画都能被触发。
• 统一时长配置：timeout和CSS transition时长保持一致，避免组件在动画未完成时就被卸载。
• 修复类名冲突：移除元素自身的过渡类名，确保初始动画样式能正常应用。
• 补充必要CSS属性：overflow: hidden保证max-height变化时内容被正确裁剪，动画效果正常显示。

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