CODEWITHSUNDEEP
reactjsreactcsstransitiongroup
vesperae
vesperae

Reputation: 1301

React CSS Transition Group, not working?

Apologies for the simplicity of this problem, but I am new to React and trying to implement a simple CSSTransitionGroup to hide/show an element, but with a fade, slide, etc. The documentation seems very straightforward, but for some reason the following code will not work for me.

While the .box toggles between being there or not, I do not see any of the CSS transitions in place on enter and on leave.

class Demo extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: false };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ visible: ! this.state.visible });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
            <ReactCSSTransitionGroup transitionName="example">
                { this.state.visible ? <div className='box' /> : null }
            </ReactCSSTransitionGroup>
        </div>
    }
}

.box {
  width: 200px;
  height: 100px;
  background: green;
  margin-top: 10px; }

.example-enter {
  height: 0px; }

.example-enter.example-enter-active {
  height: 100px;
  -webkit-transition: height .3s ease; }

.example-leave.example-leave-active {
  height: 0px;
  -webkit-transition: height .3s ease; }

I must be doing something wrong, as I can see this basic demo working in other online examples, but cannot replicate myself. Please let me know how to get my CSS transitions.

Thx internet

Upvotes: 0

Views: 6305

Answers (1)

jered
jered

Reputation: 11591

Did you check the console for error output? Because when I run your code I get this:

"Warning: Failed propType: transitionEnterTimeout wasn't supplied to ReactCSSTransitionGroup: this can cause unreliable animations and won't be supported in a future version of React. See xxx for more information. Check the render method of Demo."

"Warning: Failed propType: transitionLeaveTimeout wasn't supplied to ReactCSSTransitionGroup: this can cause unreliable animations and won't be supported in a future version of React. See xxx for more information. Check the render method of Demo."

Adding the two missing props and it works fine.

class Demo extends React.Component{
    constructor(props) {
        super(props);
        this.state = { visible: false };
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        this.setState({ visible: ! this.state.visible });
    }

    render() {
        return <div>
            <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button>
            <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={300} transitionLeaveTimeout={300} >
                { this.state.visible ? <div className='box' /> : null }
            </ReactCSSTransitionGroup>
        </div>
    }
}

transitionEnterTimeout and transitionLeaveTimeout both take a number representing the duration of the transition in milliseconds, hence "300" for a .3 second transition, which matches the CSS transitions you've specified.

Upvotes: 2

Related Questions