CSS rotate не анимируется после ключевого кадра rotate-animation - PullRequest
Новая
       27

CSS rotate не анимируется после ключевого кадра rotate-animation

2 голосов
/ 08 мая 2019

Я хочу "зацепить" 2 анимации CSS друг за другом.Первый воспроизводится при загрузке страницы и представляет собой анимацию CSS, которая поворачивает куб на некоторое градусное расстояние.В качестве второй анимации я хочу повернуть этот куб еще дальше, когда пользователь нажимает кнопку (добавить класс к кубу при нажатии).

Проблема в том, что у куба-div уже есть оператор поворота из этой первой анимации,поэтому, когда я добавляю класс (который содержит transform: rotate), он не анимируется к этому новому повороту, а сразу переходит на новый уровень вращения.Хотя я использую переход.

Я попытался отключить анимацию с добавленным классом ('. Rotate-далее'), чтобы она не прерывала второе вращение, но не помогает 

div {
  width: 20px;
  height: 20px;
  background: blue;
  animation: rotate 1s forwards;
}

.rotate-further {
  transform: rotate(150deg);
  animation: none;
}

@keyframes rotate {
    0% {
    -webkit-transform:rotate(0);
    transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(120deg);
    transform:rotate(120deg);
  }
}

Мой желаемый результат заключается в том, что второй поворот анимируется как обычно, когда вы используете, например, «transition: all .5s». 

window.setTimeout(function() {
  document.querySelector('div').classList.add('rotate-further');
}, 1500)
div {
  width: 20px;
  height: 20px;
  background: blue;
  animation: rotate 1s forwards;
}

.rotate-further {
  transform: rotate(150deg);
  animation: none;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
  }
}
<div></div>

1 Ответ

1 голос
/ 08 мая 2019

Вы можете редактировать свой код, как показано ниже: 

window.setTimeout(function() {
  document.querySelector('div').classList.add('rotate-further');
}, 1500)
div {
  width: 20px;
  height: 20px;
  background: blue;
  animation: rotate 1s;
  transform: rotate(120deg);
  transition:0.5s all
}

.rotate-further {
  transform: rotate(150deg);
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

}
<div></div>
...