CSSTransition 在 css 网格布局中制作滑出式抽屉

Question

我正在尝试使用 npm 包 react-transition-group 制作一个滑出式抽屉。无论出于何种原因，我似乎无法让抽屉在单击附加条件按钮时从左向右滑出。如果您可以在不使用该软件包的情况下解决此问题，那也可以!

这是我试图作为 React 组件工作的代码:

{/* DeveloperSearch.js */}
      <CSSTransition
        in={sidebarClicked}
        appear
        timeout={1000}
        classNames="drawer"
        mountOnEnter
        unmountOnExit
      >
        <div className="DevSearch__additional-search-criteria">
          Additional Search Criteria
          <div className="DevSearch__additional-search-criteria-individual">
            <div
              style={{
                fontSize: '0.8rem',
                marginBottom: '5px',
                fontWeight: 'bold',
              }}
            >
              Only show people who match more than {criteriaMatch}% of all
              search criteria
            </div>
            <input
              className="form-control"
              type="number"
              value={criteriaMatch}
              onChange={(e) => setCriteriaMatch(e.target.value)}
              min={0}
              max={100}
              step={5}
            />
          </div>
        </div>
      </CSSTransition>

我还有一个名为 DeveloperSearch.css 的专门用于 CSS Transition 组件的 css 文件:

.drawer-exit {
  width: 250px;
}

.drawer-exit.drawer-exit-active {
  width: 250px;
  transition: width 1000ms ease-in;
}

.drawer-exit-done {
  width: 0px;
}

.drawer-enter {
  width: 250px;
}

.drawer-enter.drawer-enter-active {
  width: 250px;
  transition: all 1000ms ease-in;
}

不幸的是，我的结果与我想要的相去甚远，因为抽屉似乎根本没有滑出...

我还在一个codesandbox中复制了这个问题，可以通过单击here找到它。 .感谢您的帮助!

Answer 1

这是一个纯基于 css 的解决方案，但这有点 hacky

1. 标记

const Drawer = ({ transitionExit, handleExit }) => (
  <div
    onClick={handleExit}
    className={`drawer ${transitionExit ? "exit" : ""}`}
  >
    <p>Home</p>
    <p>About</p>
    <p>Contact</p>
    <p>Close Drawer</p>
  </div>
);

export default function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [transitionExit, setTransitionExit] = useState(false);

  const handleExit = () => {
    setTransitionExit(true);
    setTimeout(() => {
      setIsOpen(false);
      setTransitionExit(false);
      // timeout should be less than animation time otherwise state might still be true
      // after animation ends and drawer appears for few milliseconds
    }, 450);
  };

  return (
    <div className="App">
      <div className="wrapper">
        <div className="sidebar_container">
          <button onClick={() => setIsOpen(true)}>open</button>
        </div>
        {isOpen && (
          <div className={`container ${transitionExit ? "exit" : ""}`}>
            <Drawer handleExit={handleExit} transitionExit={transitionExit} />
          </div>
        )}
      </div>
    </div>
  );
}

1. CSS

.wrapper {
  height: 90vh;
  max-width: 60vw;
  display: grid;
  grid-template-columns: 30% 70%;
  overflow: hidden;
  margin: 40px;
}

.sidebar_container {
  width: 100px;
  height: 100%;
  background-color: rgb(250, 207, 213);
  padding: 30px;
  position: relative;
  z-index: 30;
}

@keyframes containerTransitionEnter {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes drawerTransitionEnter {
  0% {
    opacity: 0;
    left: -10vw;
  }
  100% {
    opacity: 1;
    left: 0vw;
  }
}

@keyframes containerTransitionExit {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes drawerTransitionExit {
  0% {
    opacity: 1;
    left: 0vw;
  }
  100% {
    opacity: 0;
    left: -10vw;
  }
}

.container {
  position: relative;
  z-index: 10;
  height: 90vh;
  animation: containerTransitionEnter 0.5s;
}
.drawer {
  box-sizing: border-box;
  position: relative;
  height: 90vh;
  width: 25vw;
  padding: 20px;
  background-color: rgb(4, 118, 156);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  animation: drawerTransitionEnter 0.5s;
}
p {
  margin-bottom: 10px;
  color: white;
}

.container.exit {
  animation: containerTransitionExit 0.5s;
}

.drawer.exit {
  animation: drawerTransitionExit 0.5s;
}

这是 codesandbox 的链接