Ключевые кадры возвращаются в исходное состояние только при нажатии - PullRequest
Новая
       17

Ключевые кадры возвращаются в исходное состояние только при нажатии

0 голосов
/ 27 мая 2020
• 1000 , происходит вторая часть анимации. Я покажу код 
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 : firstCloseAnimation)};
    }
    :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:  rotate(45deg) translateY(-6px);
  }
  100% {
    transform: rotate(0) translateY(0px) ;
  }
`;

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;
`;

Итак, в основном то, что я хочу, - это когда я повторно нажимаю кнопку меню, которая меняет свойство open на false, я хочу противодействовать первой анимации, являющейся противоположностью firstOpenAnimation. Спасибо

...