Question

我想彼此“连锁”两个css动画。第一个在页面加载时播放，是一个css动画，该动画使立方体按某种程度旋转。作为第二个动画，我想在用户按下按钮时进一步旋转该多维数据集（将类添加到多维数据集onclick）。

问题在于cube-div已经从第一个动画中获得了一个rotate语句，因此当我添加该类（包含一个transform：rotate）时，它不会为该新旋转设置动画，而是跳到了新的旋转角度立即。我完全使用过渡。

我尝试使用添加的类（'.rotate-further'）禁用动画，以便它不会中断第二次旋转，但无济于事

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);
  }
}

我希望得到的结果是，例如，当您使用“过渡：全部.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>

Answer 1

您可以按以下方式编辑代码：

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>

关键帧旋转动画后，CSS旋转不会设置动画

1 个答案: