如何用CSS实现面板类元素从右向左滑入容器的效果

我正在创建一个自定义面板，要求它从右向左滑入，之后保持其内容自身的宽度，且该面板需在容器（即我的场景中的"box" div）内部显示，但目前无法实现该效果，希望有人能提供帮助。

原代码 #

CSS代码 #

.box {
  height: 600px;
  width: 600px;
  background-color: white;
  padding: 10px;
  border: solid 3px black;
}

.panel {
  position: absolute;
  left: 0;
  width: 180px;
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 15px black;
  background: white;
  padding: 10px;
  transform-origin: 100% 50%;
  transform: translateX(-100%);
  transition: -webkit-transform 0.2s ease-in-out;
  outline: 0;
}

.panel:target {
  transform: translateX(0%);
}

App组件 #

function App() {
  const [drawerOpen, setDrawerOpen] = useState(false);

  return (
    <div className="box">
      {drawerOpen ? (
        <SlideDrawer show={drawerOpen} {...{ setDrawerOpen }} />
      ) : null}
      <button
        onClick={() => {
          setDrawerOpen(!drawerOpen);
        }}
      >
        Click me!
      </button>
    </div>
  );
}

SlideDrawer组件 #

export default function SlideDrawer({ setDrawerOpen, show }) {
  return <div className="panel">I am sliding</div>;
}

问题分析与修改方案 #

当前代码存在几个关键问题导致效果无法实现：

• 容器.box未设置相对定位，绝对定位的面板会相对于整个文档布局，而非容器内部
• 面板初始位置和滑动方向错误，当前是从左滑入，不符合从右向左滑入的需求
• 面板固定了宽度，无法自适应内容自身宽度
• 使用:target伪类控制显示，但React中已用状态管理，两者逻辑不匹配

修改后的代码 #

CSS部分

.box {
  height: 600px;
  width: 600px;
  background-color: white;
  padding: 10px;
  border: solid 3px black;
  position: relative; /* 让内部绝对定位元素以此容器为基准 */
}

.panel {
  position: absolute;
  right: 0; /* 初始位置在容器右侧 */
  top: 0;
  bottom: 0;
  box-shadow: 0px 0px 15px black;
  background: white;
  padding: 10px;
  transform: translateX(100%); /* 初始状态完全移出容器右侧 */
  transition: transform 0.2s ease-in-out; /* 标准化过渡属性，兼容更多浏览器 */
  outline: 0;
  width: fit-content; /* 自适应内容宽度 */
  max-width: 90%; /* 限制最大宽度，避免内容过宽撑满容器 */
  max-height: 100%; /* 避免内容超出容器高度 */
  overflow-y: auto; /* 内容超出时允许垂直滚动 */
}

.panel.open { /* 用类名控制显示状态，匹配React状态逻辑 */
  transform: translateX(0%);
}

SlideDrawer组件

export default function SlideDrawer({ setDrawerOpen, show }) {
  return (
    <div className={`panel ${show ? 'open' : ''}`}>
      I am sliding<br/>
      测试自适应宽度的内容，比如这段更长的文本也能正常适配面板宽度
    </div>
  );
}

App组件（保持原状态逻辑即可）

function App() {
  const [drawerOpen, setDrawerOpen] = useState(false);

  return (
    <div className="box">
      <SlideDrawer show={drawerOpen} setDrawerOpen={setDrawerOpen} />
      <button onClick={() => setDrawerOpen(!drawerOpen)}>
        Click me!
      </button>
    </div>
  );
}

修改说明 #

1. 给.box添加position: relative，确保面板在容器内部定位
2. 调整面板的right: 0和初始transform: translateX(100%)，实现从右向左滑入的效果
3. 用width: fit-content让面板自适应内容宽度，同时添加最大宽高和滚动属性优化显示体验
4. 用状态控制的open类替代:target伪类，和React的状态管理逻辑完全匹配

内容的提问来源于stack exchange，提问作者user16860065