CSSTransition 持续时间不起作用答案

【问题标题】：CSSTransition duration doesn't workCSSTransition 持续时间不起作用
【发布时间】：2023-03-08 11:50:02
【问题描述】：

我正在尝试使用CSSTransition 来实现滑下动画，但似乎transition 的duration 不起作用。

component.jsx

let { CSSTransition, TransitionGroup } = ReactTransitionGroup

class Example extends React.Component {

    state = {
    show: false,
  };

    render() {
        return (
          <div>
            <button onClick={() => this.setState({
          show: true })}>Show</button>
          {this.state.show && (
            <CSSTransition in={this.state.show} timeout={2000} classNames="birthday-input" appear>
              <div className="form-group birthday-input">
                <h1>HEADER</h1>
              </div>
            </CSSTransition> 
          )}
            </div>
        );
    }
}

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

component.scss

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

【问题讨论】：

标签： reactjs css css-transitions css-animations reactcsstransitiongroup

【解决方案1】：

来自库文档：当 in 属性切换为 true 时，组件将获得 example-enter CSS 类和 example-enter-active CSS 类在下一个刻度中添加。这是基于classNames 属性的约定。

首先，在您的情况下，in 永远不会计算为 true，因为 showBirthInput 是 undefined。

其次，它必须对 JS 评估做一些事情，因为如果我取出 JS 评估并要求CSSTransition 在show 上渲染，它会完美运行。

这是基于您的代码的工作示例： https://stackblitz.com/edit/react-pshw1h?file=index.js

【讨论】：

我编辑了我的问题。如果你打开codepen，没有showBirthInput 。也许是因为我错过了unmountOnExit。谢谢。