Question

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

我在div中添加了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中有“显示：无”。这可能就是为什么您没有看到孩子的原因。

div上的过渡不适用于react样式组件

1 个答案: