div 上的转换在 react styled-component 中不起作用

Question

我是样式组件的新手； 我有一个汉堡包组件，当汉堡菜单变成使用样式组件的 X 时，我正在尝试进行转换。

我添加了一个transition: all 0.3s linear关系，但我就是不知道这个过渡出了什么问题。

export default (props) => {
  const StyledBurger = styled.div`
    width: 2rem;
    height: 2rem;
    position: fixed;
    top: 15px;
    left: 20px;
    z-index: 10;
    display: none;

    div {
      transition: all 0.3s linear;
      width: 2rem;
      height: 0.25rem;
      background-color: ${({ open }) => (open ? "#ccc" : "#333")};
      border-radius: 10px;
      transform-origin: 1px;

      &:nth-child(1) {
        transform: ${({ open }) => (open ? "rotate(45deg)" : "rotate(0)")};
      }
      &:nth-child(2) {
        transform: ${({ open }) =>
          open ? "translateX(100%)" : "translateX(0)"};
        opacity: ${({ open }) => (open ? 0 : 1)};
      }
      &:nth-child(3) {
        transform: ${({ open }) => (open ? "rotate(-45deg)" : "rotate(0)")};
      }
    }
  `;

  const [open, setOpen] = useState(false);


  return (
    <>
      <StyledBurger open={open} onClick={() => setOpen(!open)}>
        <div />
        <div />
        <div />
      </StyledBurger>

    </>
  );
};

Answer 1

您的 StyledBurger 中有“显示：无”。 这可能就是你看不到孩子的原因。