CODEWITHSUNDEEP
reactjscsscss-transitionscss-animationsreactcsstransitiongroup
Matt
Matt

Reputation: 8942

CSSTransition duration doesn't work

I am trying to implement slide down animation by using CSSTransition, but it seems like duration of transition doesn't work.

codepen

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;
}

Upvotes: 1

Views: 1091

Answers (1)

Rikin
Rikin

Reputation: 5473

From the library documentation: When the in prop is toggled to true the Component will get the example-enter CSS class and the example-enter-active CSS class added in the next tick. This is a convention based on the classNames prop.

First, in your case in never evaluates to true because showBirthInput is undefined.

Second, it has to do something with the JS evaluation because if I take out JS evaluation and instead ask CSSTransition to render on show it works perfectly.

Here's the working example based on your code: https://stackblitz.com/edit/react-pshw1h?file=index.js

Upvotes: 2

Related Questions