點擊按鈕重複動畫

Question

我想每次重複動畫，當我點擊我的按鈕。我試圖做點什麼like this。

const dist = document.querySelector('.dist'); 
 

 
document.querySelector('button').addEventListener('click',() => { 
 
    dist.classList.remove('animation'); 
 
    dist.classList.add('animation'); 
 
});

.dist { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    margin-bottom: 30px; 
 
} 
 

 
.animation { 
 
    transform: scale(1.5); 
 
    transition: transform 3s; 
 
}

<div class="dist"></div> 
 
<button type="button">Trigger Animation</button>

但實際上，這個片段做它只有一次。

dist.classList.remove('animation'); 
dist.classList.add('animation'); 

這部分不應該刪除狀態並從頭開始動畫嗎？

Answer 1

正在批處理類更改。你應該要求一個動畫幀添加類回元素：

window.requestAnimationFrame(function() { 
    dist.classList.add('animation'); 
}); 

const dist = document.querySelector('.dist'); 
 

 
document.querySelector('button').addEventListener('click',() => { 
 
    dist.classList.remove('animation'); 
 
    window.requestAnimationFrame(function() { 
 
    dist.classList.add('animation'); 
 
    }); 
 
});

.dist { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    margin-bottom: 30px; 
 
} 
 

 
.animation { 
 
    transform: scale(1.5); 
 
    transition: transform 3s; 
 
}

<div class="dist"></div> 
 
<button type="button">Trigger Animation</button>

Docs for requestAnimationFrame

見updated Fiddle

Answer 2

Updated fiddle。

你應該給刪除多餘的時間將新類animation（只是一個小超時就可以了）之前：

dist.classList.remove('animation'); 

setTimeout(function(){ 
    dist.classList.add('animation'); 
},10); 

希望這有助於。

const dist = document.querySelector('.dist'); 
 

 
document.querySelector('button').addEventListener('click',() => { 
 
    dist.classList.remove('animation'); 
 

 
    setTimeout(function(){ 
 
    dist.classList.add('animation'); 
 
    },10); 
 
});

.dist { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    margin-bottom: 30px; 
 
} 
 

 
.animation { 
 
    transform: scale(1.5); 
 
    transition: transform 3s; 
 
}

<div class="dist"></div> 
 
<button type="button">Trigger Animation</button>

Answer 3

這不起作用，因爲沒有針對動畫發生的時間在那裏。本質上，瀏覽器並沒有注意到該類將被移除，因爲該元素在被移除後立即獲得它。沒有時間讓它看到變化，所以它不會動畫。爲了重複它，你需要給它一些時間來注意，setTimeout是一個很好的選擇。

此外，如果你想它動畫返回到較小的尺寸，你需要改變哪個類具有transition時間。如果你在增加的課程上有它，一旦它被刪除，你就失去了時間，因此它會回到較小的尺寸。

如果您不關心動畫返回，請保持您的css不變，並將超時更改爲像100這樣的更短的內容。

嘗試做這樣的事情：

const dist = document.querySelector('.dist'); 
 

 
document.querySelector('button').addEventListener('click',() => { 
 
    if(!dist.classList.contains('animation')){ 
 
    dist.classList.add('animation'); 
 
    } else { 
 
    dist.classList.remove('animation'); 
 
    // Add it back after 3 seconds; 
 
    setTimeout(function(){ 
 
     dist.classList.add('animation'); 
 
    }, 1000 * 3); 
 
    } 
 
});

.dist { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: black; 
 
    margin-bottom: 30px; 
 
    transition: transform 3s; 
 
} 
 

 
.animation { 
 
    transform: scale(1.5); 
 
}

<div class="dist"></div> 
 
<button type="button">Trigger Animation</button>