CODEWITHSUNDEEP
javascriptcssreactjstransition
rnmalone
rnmalone

Reputation: 1060

React CSSTransition not working?

I'm trying to have a login component fade in when the page is loaded and then fade out when the new component is rendered. No fading happens at all, it just appears. I read in other posts you need a key, but I have no idea what the key value would be in this instance?

return (
        <div className="box2">
                            <CSSTransition
                                transitionName="example"
                                transitionAppear={true}
                                transitionAppearTimeout={500}
                                transitionEnter={false}
                                transitionLeave={false}>
                        <Login/>
                            </CSSTransition>
                            <Button bsStyle="primary" 
    onClick={this.changeView}>SUBMIT</Button>
                        </div>
);

CSS:

example-enter {
    opacity: 0.01;
}

.example-enter.example-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
}

.example-leave {
    opacity: 1;
}

.example-leave.example-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;
}


.example-appear {
    opacity: 0.01;
}

.example-appear.example-appear-active {
    opacity: 1;
    transition: opacity .5s ease-in;
}

Upvotes: 5

Views: 9677

Answers (1)

Tim Ellison
Tim Ellison

Reputation: 353

You're using the version 2 CSSTransition component but are passing it version 1's prop names. If you look in your console you'll probably see warnings that React doesn't recognize 'transitionName', 'transitionAppear', etc.

Here's a way to accomplish what you're looking for using version 2's CSSTransition component.

<CSSTransition
  classNames="example"
  timeout={500}
  in={this.state.mounted}
>
  <Login/>
</CSSTransition>

By default the CSSTransition component doesn't run enter animations on page load, so you need to set the in prop to some arbitrary value that starts out as false but is set to true on componentDidMount. Here's a CodeSandbox so you can see the full implementation: https://codesandbox.io/s/v8w3jxo94l

Upvotes: 11

Related Questions