React.js transitions not working for "fade out"

Question

I have a React.js component that I am trying to "fade out" using the React CSS Transitions. It is working fine for the fade in, but when I click to remove the object, it just disappears immediately (instead of the nice fading effect).

Code:

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

CSS:

/React 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 guess you were trying to remove the child node using DOM manipulation. This transition will work only if you allow it to re-render through react render method.