Почему анимация перехода так плохо анимируется? - PullRequest
Новая
       9

Почему анимация перехода так плохо анимируется?

0 голосов
/ 13 марта 2020

В настоящее время я пытаюсь анимировать эффект скольжения с помощью styled-component в ReactJs всякий раз, когда я нажимаю на кнопку. По какой-то причине моя скользящая анимация не движется плавно, а иногда даже не скользит, когда пользователь повторно нажимает кнопку.

Моя анимация выглядит следующим образом: 

const leftRightLeft = keyframes`
0%{
  -webkit-transform:translate3d(-30px,0,0);
  opacity:0;
  transform:translate3d(-30px,0,0)
}
to{
  -webkit-transform:translateZ(0);
  opacity:1;
  transform:translateZ(0)
}
  `;

const rightLeftRight = keyframes`
0%{
  -webkit-transform:translate3d(30px,0,0);
  opacity:0;
  transform:translate3d(30px,0,0)
}
to{
  -webkit-transform:translateZ(0);
  opacity:1;
  transform:translateZ(0)
}
  `;

Мой стиль-компонент выглядит следующим образом: 

const LeftContainer = styled.div`
  position: absolute;
  left: 0px;
  height: 50px;
  width: 250px;
  background-color: red;
  animation: ${props =>
    props.transition
      ? css`
          ${leftRightLeft} 800ms  linear  forwards;
        `
      : ""};

  animation-fill-mode: forwards;
`;

const RightContainer = styled.div`
  position: absolute;
  right: 0px;
  height: 50px;
  width: 250px;
  background-color: green;
  animation: ${props =>
    props.transition
      ? css`
          ${rightLeftRight} 800ms  linear  forwards;
        `
      : ""};

  animation-fill-mode: forwards;
`;

И всякий раз, когда пользователь нажимает на кнопку, он устанавливает состояние isSelected в true, чтобы я мог начать запуск анимации

Чтобы лучше проиллюстрировать мою проблему, я создал песочницу, когда вы Внутри, пожалуйста, постоянно нажимайте на кнопку и обратите внимание на скользящую анимацию. https://codesandbox.io/s/nervous-poincare-v639n

Я ожидаю, что всякий раз, когда пользователь нажимает кнопку, анимация сбрасывается и плавно анимируется. И так как я новичок в анимации, я понятия не имею, что я могу сделать.

...