ReactCSSTransitionGroup不會激活轉換

ReactCSSTransitionGroup對我不做任何事情，除了延遲我想要顯示的元素。我試圖讓我的組件在頁面加載時淡入。這是有問題的代碼：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; 
    }; 
};

我已經嘗試了一些事情，谷歌提供的，但沒有奏效。然而，一切似乎都是有序的。代碼有什麼問題？

來源

2016-03-30 user75454

您是否在控制檯中發現任何錯誤？它一直在工作嗎？ –

對不起，我應該澄清一點。在控制檯中沒有錯誤，但組件確實呈現，沒有轉換。 – user75454

你SASS代碼是暗示活動狀態類被應用到你的益智元素中的一個元素，但我不認爲是這種情況。

如果你看到渲染時應用的類並且該位工作正常，那麼這可能是問題所在。將-active樣式移出當前的嵌套位置。

來源

2016-03-31 06:51:51

啊，就是這樣。看起來我仍然需要刷上我的SASS。謝謝！ – user75454

ReactCSSTransitionGroup不會激活轉換

回答

相關問題