React js右側欄：從右側淡入淡出

Question

我正在試圖製作一個簡單的右側欄，它應該從右側onclick淡入淡出。下面是從左側出現的側邊欄示例：Jsfiddlecode

任何線索？我對CSS的瞭解; HTML和反應JS是基本的。所以任何幫助或建議將不勝感激。

Answer 1

我已經更新了搗鼓你：

https://jsfiddle.net/cc96ku6t/3/

你需要改變left到right基本上在CSS：

header { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 60px; 
    background-color: lightcoral; 
} 
.sidebar { 
    position: absolute; 
    top: 60px; 
    right: -300px; 
    height: 100%; 
    width: 300px; 
    transition: left .3s ease-in-out; 
    background-color: white; 
} 
.sidebar-toggle { 
    position: absolute; 
    top: 20%; 
    left: -60px; 
    height: 60px; 
    width: 60px; 
    z-index: 1; 
} 
.content { 
    position: absolute; 
    top: 60px; 
    left: 0; 
    right: 0; 
    height: 100%; 
    transition: left .3s ease-in-out; 
    background-color: lightgray; 
} 
.sidebar.open { 
    right: 0; 
} 
.content.open { 
    right: 300px; 
}