ReactJs最大高度动画

Question

嗨，我正在尝试制作最大高度动画，但是它仅在关闭切换按钮（下拉菜单）时有效：

gif：

但是我也想在打开下拉菜单时添加动画

我使用reactjs和情感

jsx：

const MenuItem = ({ key, index, tag, setVisible, visibleMenu }) => {
  const { name, dropdownItems, icon } = tag;
  const handleClick = index => {
    if (visibleMenu === true) return setVisible("none");
    if (visibleMenu === index) return setVisible("none");
    return setVisible(index);
  };
  return (
    <ListItem active={visibleMenu}>
      <div
        onClick={() => {
          handleClick(index);
        }}
        className="li-menuOpen"
      >
        <a>
          <FontAwesomeIcon
            className="icon-li"
            icon={icon}
            size={"lg"}
            fixedWidth
            color="white"
          />
          <span
            className="li-name"
            onClick={() => {
              handleClick(index);
            }}
          >
            {name}
          </span>
        </a>
        <span className="svg-arrow">
          {dropdownItems ? (
            <FontAwesomeIcon
              className="down-up_svg"
              icon={visibleMenu ? faAngleUp : faAngleDown}
              size="1x"
              fixedWidth
              color="white"
            />
          ) : (
            ""
          )}
        </span>
      </div>
      {dropdownItems ? (
        <DropDown list={dropdownItems} active={visibleMenu} />
      ) : (
        ""
      )}
    </ListItem>
  );
};

在这里我具有动画成分：

const OpenedSide = ({ open, active, list }) => {
  return (
    <>
      <OpenedStyled open={open} active={active}>
        {list.map(item => (
          <li className="li-open" key={item.name}>
            <FontAwesomeIcon
              className="icon-li-drop"
              icon={faCircleNotch}
              size="1x"
              fixedWidth
              color="white"
            />
            <a>{item.name}</a>
          </li>
        ))}
      </OpenedStyled>
    </>
  );
};

css：

export const ListItem = styled.li`
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: space-between;
  cursor: pointer;
  & .icon-li {
    margin-right: 10px;
  }
  & .li-menuOpen {
    ${props => {
      if (props.active) {
        return css`
          border-left: 3px solid orange;
          background: ${shade(0.4, "#3c8dbc")};
          :hover,
          :active {
            background: ${shade(0.4, "#3c8dbc")};
          }
        `;
      }
    }}
    padding: 12px 5px 12px 15px;
    display: flex;
    justify-content: ${props => (props.open ? "center" : "space-between")};
  }
  & .down-up_svg,
  .li-name {
    display: ${props => (props.open ? "none" : "space-between")};
  }
`;
export const OpenedStyled = styled.ul`
  ${props => {
    if (props.active) {
      return css`
        max-height: 400px !important;
      `;
    }
  }}
  position:relative;
  max-height: 0;
  overflow: hidden;
  background: ${shade(0.4, "#3c8dbc")};
  transition: max-height 5s cubic-bezier(0, 1, 0, 1);
  li {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 12px 20px 12px 20px;
    svg {
      margin-right: 20px;
    }
  }
  a {
    font-family: "Ubuntu";
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    color: #fff;
  }
  & .li-open:hover > .icon-li-drop {
    color: orange;
    transition: color 0.5s;
  }
  & .icon-li-drop {
    margin-right: 10px;
  }
`;

示例工作：

https://codesandbox.io/s/purple-silence-ytc5h?file=/src/styled.js:299-1028