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部分不工作的。什麼都沒有動

的CSS的DIV #intro，可是沒有什麼特別的，只是font，text-align，width，float:right

Answer 1

你只是在指定的不透明度應與轉換規則進行動畫處理。根據this anwer，變形屬性僅適用於塊級元素。試試這樣做：

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