CSS3中帶有JS觸發器的動畫

Question

我有一個問題，當您使用該功能旋轉藍色方塊時，只能使用一次。 之后，您必須重新加載頁面才能再次使用旋轉功能。 同樣，當您通過單擊一次旋轉了120度時，正方形將重置自身並返回到起始位置。

所以我需要兩件事幫助。

1. 請進行修復，以便您可以多次單擊旋轉功能，並且旋轉功能會不斷旋轉。
2. 防止正方形重置其位置。

我用代碼弄了個小提琴： https : //jsfiddle.net/kv7may8t/2/

document.getElementById('button1').addEventListener('click', function() {
    document.getElementById('blue').classList.add('rotateright');
});

功能匯總：單擊button1觸發功能，將“ rotateright”類添加到藍色正方形，使其旋轉120度。

Answer 1

試試這個代碼：

    document.getElementById('button1').addEventListener('click', function() {
   var degrees +=120;
   var time = 4;
   document.getElementById('blue').style.WebkitTransitionDuration= time + "s";
   document.getElementById('blue').style.transform = "rotate(" +degrees + "deg)";
});

調整變化程度和持續時間。

Answer 2

您的代碼是正確的，只是需要一些修改，您正在使用transform，當您添加類時，它將旋轉該div。 您只需要在添加類之前刪除它。 這是小提琴 。 使用此代碼

document.getElementById('button1').addEventListener('click', function() {
    document.getElementById('blue').classList.remove('rotateright');
    setTimeout(function(){
        document.getElementById('blue').classList.add('rotateright');    
    },100)

});

document.getElementById('button2').addEventListener('click', function() {
    document.getElementById('blue').classList.remove('rotateleft');
    setTimeout(function(){
        document.getElementById('blue').classList.add('rotateleft');        
    },100)
});


document.getElementById('button3').addEventListener('click', function() {
    document.getElementById('red').classList.add('animate');
});

document.getElementById('button4').addEventListener('click', function() {
    document.getElementById('red').classList.remove('animate');
});

不要忘了在移除類之后使用setTimeout，它需要一些時間。 因此，請使用setTimeout，然后添加類。

Answer 3

第一件事去除類的答案將解決您的第一個問題：

var bluediv = document.getElementById('blue')

bluediv.addEventListener("animationend", function() {
bluediv.classList.remove('rotateright');
      bluediv.classList.remove('rotateleft');
});

檢查小提琴。 （您可以多次單擊旋轉功能，它會一直旋轉。-已解決）

第二件事的答案是（僅適用於右）：

使用： animation-iteration-count: forwards;

在這里檢查小提琴。 （防止正方形重置其位置已解決）