React JS更改類與轉換

Question

我正在使用ReactJS構建網站。在我的頁面上，我有一個內容部分以及一個側邊欄。

當我點擊一個按鈕應切換側邊欄。目前，我正在將bootstrap中的內容類別從col-md-9更改爲col-md-12，並將屬性hidden設置爲邊欄。

但是現在，我想添加一些類似淡入淡出和淡入淡出邊界並增加內容大小的轉換。我不知道如何添加這些轉換，因爲我正在更改類。

你能告訴我我必須做什麼嗎？

Answer 1

您可以使用CSS。看看animate.css

https://daneden.github.io/animate.css/

Answer 2

您可以通過更改類使用CSS過渡。這裏是例如兩個clsses，會做的動畫漸變的：

.fade-in { 
    opacity: 0; 
    transition: opacity 400ms; 
} 


.fade-out { 
    opacity: 1; 
    transition: opacity 400ms; 
} 

但是它不會隨着hidden Bootstrap類名的工作，因爲它設置display屬性none值。爲了使其工作，您可以使用fade-in類名稱而不是hidden和fade-out，當側導航應該變得可見