React.js transitions don't work for "fade out"

Question

I have a React.js component that I am trying to “fade” with React CSS Transitions. It works great for fading, but when I click to delete an object, it disappears immediately (instead of a nice fading effect).

code:

<ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionLeave={true} transitionEnterTimeout={600} transitionAppearTimeout={600} transitionLeaveTimeout={300} > some object </ReactCSSTransitionGroup> 

CSS

/ Real transitions /

 .example-enter { opacity: 0.01; transition: opacity .5s ease-in; } .example-enter.example-enter-active { opacity: 1; } .example-leave { opacity: 1; transition: opacity 1s ease-in; } .example-leave.example-leave-active { opacity: 0.01; transition: opacity 300ms ease-in; } .example-appear { opacity: 0.01; transition: opacity 1s ease-in; } .example-appear.example-appear-active { opacity: 1; } 

Answer 1

Here is a working jsfiddle demo

 var {CSSTransitionGroup} = React.addons; var Fade = React.createClass({ getInitialState () { return { items: ["Hello"] } }, clickHandler (e) { this.setState({items:[]}); }, render: function() { var {items} = this.state; return ( <CSSTransitionGroup transitionName="example" transitionAppear={true} transitionLeave={true} transitionEnterTimeout={600} transitionAppearTimeout={600} transitionLeaveTimeout={300}> {items.map(item => <div onClick={this.clickHandler}>{item}</div>)} </CSSTransitionGroup> ); } }); ReactDOM.render(<Fade/>, document.getElementById('container')); 

I assume that you were trying to remove a child of a node using DOM manipulation. This transition will only work if you allow it to be re-executed through the rendering method.

Answer 2

I found a problem in your CSS, just deleted the comment line:

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