ReactCSSTransitionGroupが変換のために適切にアニメートされていません

Question

私はルート間にアニメーションを追加することができます。しかし、私は次のように簡単な何かをしようとすると：

var IntroSection = React.createClass({ 
render: function(){ 
    return(

     <div id = "intro"> 

     <ReactCSSTransitionGroup transitionName="introFirst" transitionAppear={true} transitionAppearTimeout={1300}> 
     <span key={"hello"}> Hello, </span> 
     </ReactCSSTransitionGroup> 

    [...] 
    </div> 

CSS：

.introFirst-appear{ 
    opacity: 0; 
    transform: translateX(-250px); 
    transition: opacity 10s linear; 
    } 

    .introFirst-appear.introFirst-appear-active { 
    opacity: 1; 
    transform:translateX(0px); 
    } 

不透明部分が完璧に動作しますが、移動X部分のdoesntの仕事ですべて。何も動いていない。

のdiv #introためのCSSは、唯一font、text-align、width、float:right

Answer 1

あなたが唯一の不透明度は、遷移ルール​​にアニメーションされるように指定している、特別な何かを持っているdoesntの。 Alosでは、this anwerによると、transformプロパティはブロックレベルの要素にのみ適用されます。

.introFirst-appear { 
    /*...*/ 
    display: inline-block; 
    transition: opacity 10s linear, transform 10s linear; 
}