在 CSS 反应过滤器栏中滑动

Question

我正在尝试创建滑入/滑出动画，但没有成功。 我有一个过滤器栏，它的默认模式是关闭的，一旦用户单击它，我希望它从按钮向左滑入，当他再次单击它时，我希望它滑出按钮。过滤条+按钮需要保持在同一行。

请检查我的代码HERE

我们将不胜感激

Answer 1

您不需要为此类过渡使用动画，只需利用 css 过渡即可。您的示例快到了，我对其进行了快速更新，解决了问题并简化了您的过滤器组件

filter.js

import React, { useState } from "react";
import "./src/styles.css";

export default function Filter() {
  const [open, setOpen] = useState(false);

  const handleFilterClick = () => {
    setOpen(!open);
  };
  return (
    <div className="Filter">
      <div className={`toolbar ${open ? "show" : ""}`}>
        <div className="slide-in-content">
          <input type="text" />
          <input type="text" />
          <input type="text" />
          <input type="text" />
        </div>
      </div>
      <div className="button">
        <button onClick={handleFilterClick}>
          {!open ? "<< Filters" : ">> Clear"}
        </button>
      </div>
    </div>
  );
}

styles.css

html,
body {
  padding: 0;
  margin: 0;
}

.Filter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: blue;
}
.Filter .toolbar {
  flex-grow: 1;
  position: relative;
  background: red;
  height: 3rem;
}
.Filter .toolbar .slide-in-content {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  transform: translateX(120%);
  transition: transform 0.5s ease-out;
}

.Filter .toolbar.show .slide-in-content {
  transform: translateX(0);
}

.Filter .button {
  flex-grow: 0;
}