リアクションアニメーションがコンポーネントのマウントを解除しても動作しない

Question

私は、入り口と出口をアニメーション化したい別の要素をレンダリングするコンポーネントに取り組んでいます。マウントしてアンマウントすると、このコンポーネントは不透明それに対応する行動に。今、私はこの基本的なセットアップを持っており、私はフェードアウトを引き起こすことができません。 ReactCSSTransitionGroupのコンポーネントを間違った場所にラップしていますか？

コード：

import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup; 

class Parent extends React.Component { 
    static defaultProps = { 
    exampleArr = ['one', 'two', 'three'] 
    }; 

    render() { 
    <div> 
     {exampleArr ? 
     {this.props.exampleArr.map((child) => { 
      return <ReactCSSTransitionGroup 
      transitionName="example" 
      transitionAppear={true} 
      transitionLeave={true} 
      transitionEnterTimeout={600} 
      transitionLeaveTimeout={600} 
      > 
      <Child key={}/> 
      </ReactCSSTransitionGroup> 
     }); 
     : null 
    </div> 
    } 
} 

次のように私のCSSは次のとおりです。

.example-enter { 
    opacity: 0.01; 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
    transition: opacity 600ms ease-in; 
} 

.example-leave { 
    opacity: 1; 
} 

.example-leave.example-leave-active { 
    opacity: 0.01; 
    transition: opacity 600ms ease-in; 
} 

誰もが、それはマウント上におけるフェージングだ理由として任意の洞察力を持っていますが、ただのアニメーションせずに完全に離れて飛び出るんアンマウントで？

Answer 1

現在、exampleArrの各配列項目をトランジショングループにラップしています。代わりに、このような単一の遷移グループでのご生成された要素の全体を包む：

import React, { Component, cloneElement } from 'react; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 

class Parent extends Component { 
    render() { 
    <div> 
     <ReactCSSTransitionGroup 
     transitionName="example" 
     transitionAppear={true} 
     transitionAppearTimeout={600} 
     transitionEnterTimeout={600} 
     transitionLeaveTimeout={600} 
     > 
     {this.props.children} 
     </ReactCSSTransitionGroup> 
    </div> 
    } 
} 

そこで、このような子どもたちのラッパーとしてあなたの親要素を使用します。

<Parent> 
    <div>one</div> 
    <Child>two</Child> 
    <AnyOtherComponent>three</AnyOtherComponent> 
</Parent> 

あなたが作成した場合例のように親クラスの要素がある場合は、

{this.props.exampleArr.map(item => <div>{item}</div>)}