React js 右侧边栏:从右侧淡入淡出

React js right sidebar: fade-in fade-out from the right side

本文关键字：淡入 淡出 js 侧边栏 React      更新时间：2023-09-26

我正在尝试制作一个简单的右侧边栏，它应该从右侧点击淡入。下面是从左边显示的侧边栏示例： Jsfiddle代码

有什么线索吗？我对 CSS 的了解;HTML 和 react JS 是基本的。因此，任何帮助或建议将不胜感激。

我已经为您更新了小提琴：

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

您需要在 css 中将left更改为right：

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;
}
相关文章：