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 中有“顯示：無”。 這可能就是你看不到孩子的原因。