Reactjsの問題が

Question

まだ私はエラーを取得しています -

失敗しましたプロップタイプ：transitionLeaveTimeoutは ReactCSSTransitionGroupに供給されていなかった。これは信頼性の低いアニメーション引き起こす可能と は、将来のバージョンではサポートされません。

私を反応させるルックスをレンダリング -

var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); 

render(){ 
     const {...others} = this.props; 
     return(<div id="navigation"> 
      <img id="openNav" onClick={this.handleClick} src={this.state.source}/> 
      {this.state.clicked ? 
       <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}> 
        <Navigation {...others} /> 
       </ReactCSSTransitionGroup>: false} 
      </div> 
     ) 
    } 

「反応」：「^ 15.2.1」、

を私は問題は...あなたが取得している

Answer 1

警告がReact v0.14 changelogに記載の変化に起因している場合知らない：

アドオン：信頼性を向上させるために、CSSTransitionGroupは移行イベントを監視しません。代わりに、transitionEnterTimeout = {500}などの小道具を使用して手動で移行期間を指定する必要があります。

コード例はthe documentationで更新されていますが、小道具は実際には文書化されていません。

この2つの小道具（​​とtransitionLeaveTimeout）を自分で追加する必要があります。

<ReactCSSTransitionGroup 
    transitionName="example" 
    transitionAppear={true} 
    transitionAppearTimeout={500} 
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={500}> 

また、あなたがReactCSSTransitionGroupにtransitionEnter={false}またはtransitionLeave={false}小道具を使って、必要な場合enterとleaveイベントをアニメーション無効にすることができます。

Answer 2

あなたは、このような500msの休暇タイムアウトとルックスレンダリングするので、あなたのReactCSSTransitionGroupコンポーネントにtransitionLeaveTimeoutを追加する必要があります。私:(...エラーなし、OKではない

var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); 

render(){ 
    const {...others} = this.props; 
    return(<div id="navigation"> 
     <img id="openNav" onClick={this.handleClick} src={this.state.source}/> 
     {this.state.clicked ? 
      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionLeaveTimeout={500}> 
       <Navigation {...others} /> 
      </ReactCSSTransitionGroup>: false} 
     </div> 
    ) 
}