Javascript 自定义底部抽屉不使用过渡属性来平滑打开

AboutCard组件

import React, { Fragment, useState } from "react";
import "../../customCSS/container.css";
import "../../customCSS/bootstrap-grid.min.css";
import "./AboutCard.css";
import Drawer from "../Drawer/Drawer";

const AboutCard = ({ image, header, title }) => {
  const [show, setShow] = useState(false);
  const handleDrawer = () => {
    setShow((prevState) => !prevState);
  };
  return (
    <Fragment>
      <div className="about-card">
        <div className="about-card-image">
          <img src={image} />
        </div>
        <div className="about-card-content">
          <p className="about-card-content-header">{header}</p>
          <p className="about-card-content-title">{title}</p>
          <p onClick={handleDrawer} className="about-card-content-link">
            Learn More
          </p>
        </div>
      </div>
      {show ? <Drawer /> : null}
    </Fragment>
  );
};

export default AboutCard;

我在react中创建了一个自定义抽屉。当我点击AboutCard组件中的“了解更多”链接时，它会快速打开抽屉。我希望它能够顺利打开，为此我提供了过渡，但它并没有按预期工作。我该如何解决这个问题。感谢您的帮助

import React, { Fragment, useEffect } from "react";
import "./Drawer.css";

const Drawer = () => {
  const drawerStyle = {
    bottom: "0px",
  };
  return (
    <Fragment>
      <div className="drawer-container">
        <div className="drawer" style={drawerStyle}>
          <p>Most Loved Restaurants!</p>
          <p>Most Loved Restaurants!</p>
          <p>Most Loved Restaurants!</p>
          <p>Most Loved Restaurants!</p>
          <div className="drawer-close"></div>
        </div>
      </div>
    </Fragment>
  );
};

export default Drawer;

.drawer-container {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.drawer {
  position: fixed;
  background: #ffffff;
  left: 0px;
  bottom: -500px;
  height: 70%;
  overflow: scroll;
  width: 100%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  transition: bottom 0.4s ease-in-out;
}