Question

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

component.jsx

transition

component.scss

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')
);

Answer 1

从图书馆文档：当in prop切换为true时，Component将获得example-enter CSS类，并在下一个tick中添加example-enter-active CSS类。这是一个基于classNames道具的惯例。

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

其次，它必须对JS评估做一些事情，因为如果我拿出JS评估，而是要求CSSTransition在show上呈现它完美无缺。

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

CSST过渡持续时间不起作用

1 个答案: