如何在js中先进行变换然后进行动画？

Question

我希望item1可以更大并且先旋转，然后继续旋转， 但结果表明它只执行动画而不执行变换。 谢谢您的帮助。

在 CSS 中

#item1 {
    transition: transform 3s ease-in-out;
    animation: spin 10s linear infinite;
    animation-play-state: paused;
}

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

    100%{
        transform: rotate(360deg);
    }
}

在js中

button.onclick = function () {
  item1.style.transform = "scale(1.2) rotate(360deg)";
  setTimeout(function () {
    item1.style.animationPlayState = "running";
  }, 3000);
};

Answer 1

您可以使用

static

类和

animate

类，该类在

scale(1.2)

属性中也具有

transform

，如下所示：

const button = document.getElementById('id');
const item1 = document.getElementsByTagName('div')[0];

button.onclick = function () {
  item1.className="static";
  setTimeout(function () {
    item1.className="animate";
  }, 3000);
};

.static {
  transform: scale(1.2);
}

.animate {
    transition: transform 3s ease-in-out;
    animation: spin 10s linear infinite;
}

@keyframes spin{
    0%{
        transform: scale(1.2) rotate(0deg);
    }

    100%{
        transform: scale(1.2) rotate(360deg);
    }
}

<button id="id">
Animate
</button>
<div>
Barrel roll
</div>