I'm trying to have a login ponent fade in when the page is loaded and then fade out when the new ponent 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;
}

I'm trying to have a login ponent fade in when the page is loaded and then fade out when the new ponent 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;
}

• javascript
• css
• reactjs
• transition

• What version are you using? Latest is using a slightly different syntax. – Theo.T Commented Oct 11, 2017 at 15:04

1 Answer 1

You're using the version 2 CSSTransition ponent 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 acplish what you're looking for using version 2's CSSTransition ponent.

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

By default the CSSTransition ponent 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 ponentDidMount. Here's a CodeSandbox so you can see the full implementation: https://codesandbox.io/s/v8w3jxo94l