Zmiany w pliku React.js nie działają w celu "zanikania"

Question

Mam komponent React.js, który próbuję "wyciszyć" przy użyciu przejść React CSS. Działa dobrze, aby zaniknąć, ale kiedy klikam, aby usunąć obiekt, po prostu znika natychmiast (zamiast przyjemnego znikającego efektu).

Kod:

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

CSS:

/React przejścia/

.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

znalazłem problem w swoim CSS prostu usunąć skomentował wiersz:

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

Answer 2

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')); 

Chyba próbowali usunąć węzeł podrzędny za pomocą manipulacji DOM. To przejście będzie działać tylko wtedy, gdy zezwolisz na ponowne renderowanie poprzez reakcję na metodę renderowania.