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

如何解决如何在React中使用CSS的关键帧显示滑动侧栏

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

我知道有很多反应库可以很容易地使滑动条变得容易，但是我现在想要的就像一个滑动条，通过一个切换按钮来推动主要部分。

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

这是我要实现的目标的图像。

因此，我最初将引导程序用作下面的代码。

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;
}

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

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

非常感谢您。

解决方法

这里是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>的 width 必须更改，因为我们不希望右侧面板阻止我们看到<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。