如何在 React 中使用 css 的关键帧显示滑动侧栏答案

【问题标题】：How to show a sliding side bar using keyframes of css in React如何在 React 中使用 css 的关键帧显示滑动侧栏
【发布时间】：2023-04-03 11:06:01
【问题描述】：

现在我在使用 react 制作滑动侧边栏时遇到问题。

我知道有很多 react 库可以很容易地制作一个滑动条，但我现在想要的是一个滑动条，它可以通过一个切换按钮推动主要部分。

简单地说，如果单击按钮，则将内容拆分为主要内容的 75% 和侧边栏的 25%。我也想使用关键帧制作动画。

这是我想要实现的图像。

所以我最初使用 bootstrap 作为下面的代码。

const [isNoteOpen, setIsNoteOpen] = useState(false, []);

  const onClickBtn = (e) => {
    setIsNoteOpen(!isNoteOpen);
    console.log(isNoteOpen);
  };

  const btnStyle = {
    position: "fixed",
    top: "7rem",
    right: "3rem",
    zIndex: "1",
  };

  return (
    <div className="d-flex">
      <button
        style={btnStyle}
        className={`btn float-right round-box ${(isNoteOpen && "btn-primary") || "btn-danger"}`}
        onClick={onClickBtn}
      >
        &lt;
      </button>

      <div className="d-flex w-100 mx-0 mx-md-5">
        <div className={`note-transition pr-3 pl-2 ${isNoteOpen ? "w-75" : "w-100"}`}>
          <div className="">
            <img className="img-fluid w-100" src="https://picsum.photos/800/500" alt="" />
          </div>
        </div>

          <div className={`pl-3 pr-2 ${isNoteOpen ? "w-25" : "d-none"} `}>
          <div className="d-flex flex-column justify-content-center">
            <div className="border w-100" style={{ height: "100px" }}>
              PLACEHOLDER
            </div>
          </div>
        </div>
      </div>
    </div>
  );

style.css

.note-transition {
  transition: .3s all ease-in-out;
}

当我关闭侧边栏时很好，但是当我打开侧边栏时，它突然出现。然后我想应用关键帧来制作动画，以便我认为它不会突然出现。但是我不知道如何使它工作。

如果有人能告诉我如何实现这一点，我将不胜感激。如果您知道任何其他更优雅或更高效的解决方案，请也告诉我以供我将来参考。

非常感谢您。

【问题讨论】：

标签： reactjs css-animations sidebar keyframe

【解决方案1】：

这是way to achieve what you need。

只能在“transform”和“opacity”CSS 属性上进行平滑过渡。如果您对其他属性执行此操作，您将面临重新计算布局并且速度会变慢。
在功能强大的台式计算机上您可能不会注意到这一点，但您可能会在手机上遇到卡顿。

我们想要的是这样的：

<div class="show-navbar">
  <article>...</article>
  <navbar>...</navbar>
<div>

当设置show-navbar 类时，我们希望在右侧看到完整的<navbar>。
但是当hide-navbar 被设置时，我们希望这个<navbar> 平滑地隐藏在屏幕之外。

您可以使用以下 CSS 代码实现此目的：

#my-component.show-navbar > navbar {
  transform: translateX(0);
  transition: transform .3s;
}

#my-component.hide-navbar > navbar {
  transform: translateX(var(--navbar-size));
  transition: transform .3s;  
}

现在的问题是<article> 的宽度必须更改，因为我们不希望右侧面板阻止我们看到<article> 的内容。所以我们必须告诉 CSS 这个过渡不是平滑的。

#my-component.show-navbar > article {
  right: var(--navbar-size);
  transition: right .3s steps(1, end);
}

#my-component.hide-navbar > article {
  right: 0;
  transition: none;
}

当我们过渡到 hide-navbar 时，我们希望 <article> 立即展开。
但是当我们过渡到 show-navbar 时，我们希望它在 300 毫秒结束时缩小。这就是我们使用时间函数 steps() 的原因。见doc on MDN。

【讨论】：