ReactCSSTransitionGroupはトランジションを有効にしません

Question

ReactCSSTransitionGroupは表示したい要素を遅らせる以外に何もしません。私はページロード時にコンポーネントをフェードインさせようとしています。ここでは、コードに問題がある：

import React from 'react'; 
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup'; 

... 

render() { 
    if(this.state.mounted) { 
     var child = (
      <div> 
       <h1>{this.state.title}</h1> 
       <p>Description: {this.state.description}</p> 
       <p>Language(s): {this.state.lang}</p> 
      </div> 
     ); 
    } 
    else { 
     var child = null; 
    } 
    return (
     <div className="container"> 
      <ReactCSSTransitionGroup transitionAppear={true} transitionAppearTimeout={1000} transitionName="puzzle" transitionEnterTimeout={500} transitionLeaveTimeout={300}> 
       {child} 
      </ReactCSSTransitionGroup> 
     </div> 
    ) 
} 

そして、ここでは、SASSで書かれたCSSです：

.puzzle-appear { 
    opacity: .01; 
    .puzzle-appear-active { 
     opacity: 1; 
     transition: opacity 1000ms ease-in; 
    }; 
}; 

.puzzle-enter { 
    opacity: .01; 
    .puzzle-enter-active { 
     opacity: 1; 
     transition: opacity 500ms ease-in; 
    }; 
}; 

.puzzle-leave { 
    opacity: 1; 
    .puzzle-leave-active { 
     opacity: .01; 
     transition: opacity 300ms ease-in; 
    }; 
}; 

私は、Googleが提供する多くのことを試してみたが、何も働いていません。しかし、すべてが整っているようです。コードの何が間違っていますか？

Answer 1

あなたはアクティブ状態のクラスがあなたのパズル要素の中の要素に適用されていることを示唆していますが、私はそうではないと思います。

レンダリング時にクラスが適用され、そのビットが正常に動作していることがわかっている場合は、おそらくこれが問題です。 --activeスタイルを現在の入れ子位置から移動します。