当道具是错误样式的组件时如何反转动画

Question

我将一个 open 属性传递给样式化组件，以便为汉堡图标创建动画。 这是代码

const StyledBurger = styled.button`
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  background-color: ${colors.cobaltBlue};
  border-radius: 2.7px;
  cursor: pointer;
  div {
    width: 27px;
    height: 3px;
    margin: 1.5px;
    transition: all 0.2s linear;
    border-radius: 1.4px;
    background-color: ${colors.white};
    :first-child {
      ${({ open }) => open && firstOpenAnimation};
    }
    :nth-child(2) {
      opacity: ${({ open }) => (open ? '0' : '1')};
    }
    :nth-child(3) {
      ${({ open }) => open && seconOpenAnimation}
    }
  }
`;

const firstOpenKeyframe = keyframes`
  50% {
    transform: translateY(6px) rotate(0);
  }
  100% {
    transform: translateY(6px) rotate(45deg);
  }
`;

const secondOpenKeyframe = keyframes`
  50% {
    transform: translateY(-6px) rotate(0);
  }
  100% {
    transform: translateY(-6px) rotate(-45deg);
  }
`;

const firstCloseKeyFrame = keyframes`
  50% {
    transform:translateY(0) rotate(-45deg);
  }
  100% {
    transform:translateY(-6px) rotate(-45deg)  ;
  }
`;

const firstOpenAnimation = css`
  animation: 0.3s linear ${firstOpenKeyframe} forwards;
`;

const seconOpenAnimation = css`
  animation: 0.3s linear ${secondOpenKeyframe} forwards;
`;

const firstCloseAnimation = css`
  animation: 0.3s linear ${firstCloseKeyFrame} forwards;
`;

export default StyledBurger;

基本上我想要的是如果菜单未打开以反转第一次单击后创建的动画。 我尝试根据 prop open 对动画关键帧进行条件渲染，但是当页面加载时会立即创建未打开的动画，因为它满足 false。 我可以做些什么来解决这个问题并在未点击时创建相反的动画

Answer 1

进行一些更正，它应该都能正常工作。

• 使用状态切换打开并将其作为道具发送到您的样式组件
• 对动画使用三元（不仅仅是&&）${({ open }) => (open ? firstOpenAnimation : firstCloseAnimation)}。
• 实现缺少关闭第二个动画

working copy of your code is here

工作代码sn-p

const StyledBurger = styled.button`
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  background-color: red;
  border-radius: 2.7px;
  cursor: pointer;
  height: 30px;
  div {
    width: 27px;
    height: 3px;
    margin: 1.5px;
    transition: all 0.2s linear;
    border-radius: 1.4px;
    background-color: white;
    :first-child {
      ${({ open }) =>
        open !== null && (open ? firstOpenAnimation : firstCloseAnimation)}
    }
    :nth-child(2) {
      opacity: ${({ open }) => (open ? "0" : "1")};
    }
    :nth-child(3) {
      ${({ open }) =>
        open !== null && (open ? seconOpenAnimation : secondCloseAnimation)}
    }
  }
`;

const firstOpenKeyframe = keyframes`
  50% {
    transform: translateY(6px) rotate(0);
  }
  100% {
    transform: translateY(6px) rotate(45deg);
  }
`;

const secondOpenKeyframe = keyframes`
  50% {
    transform: translateY(-6px) rotate(0);
  }
  100% {
    transform: translateY(-6px) rotate(-45deg);
  }
`;

const firstCloseKeyFrame = keyframes`
  50% {
    transform:translateY(0) rotate(-45deg);
  }
  100% {
    transform:translateY(0) rotate(0)  ;
  }
`;
const secondCloseKeyFrame = keyframes`
  50% {
    transform:translateY(0) rotate(-45deg);
  }
  100% {
    transform:translateY(0) rotate(0)  ;
  }
`;

const firstOpenAnimation = css`
  animation: 0.3s linear ${firstOpenKeyframe} forwards;
`;

const seconOpenAnimation = css`
  animation: 0.3s linear ${secondOpenKeyframe} forwards;
`;
const secondCloseAnimation = css`
  animation: 0.3s linear ${secondCloseKeyFrame} forwards;
`;

const firstCloseAnimation = css`
  animation: 0.3s linear ${firstCloseKeyFrame} forwards;
`;
export default function App() {
  const [open, setOpen] = useState(null);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <StyledBurger onClick={() => setOpen(prev => !prev)} open={open}>
        <div />
        <div />
        <div />
      </StyledBurger>
    </div>
  );
}