為什么不能重用CSS關鍵幀動畫？

Question

我想每次都提交一個CSS關鍵幀動畫，但是目前它僅在第一次時有效。 你能看到我做錯了嗎？

CSS：

@keyframes enlarge {
0%   {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {-webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);}
}

.enlarge {
animation-name: enlarge;
animation-duration: 2s;

JS：

var enlarge = function(response) {

    document.querySelector("#messageContainer").classList.add("enlarge");

    var reset = setTimeout(function() {

        document.querySelector("#messageContainer").classList.remove("enlarge");

    }, 2000);
};

我一半希望在我編寫本文時能找到解決方案，但事實並非如此。

Answer 1

您的代碼似乎可以按照您的描述正常工作...請嘗試單擊下面的“運行代碼段”：

 var enlarge = function(response) { document.querySelector("#container").classList.remove("hidden"); document.querySelector("#example").classList.add("enlarge"); var reset = setTimeout(function() { document.querySelector("#example").classList.remove("enlarge"); document.querySelector("#container").classList.add("hidden"); }, 2000); }; 

 #example { background: red; width: 150px; } @keyframes enlarge { 0% {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);} 100% {-webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);} } .hidden { display: none; } .enlarge { animation-name: enlarge; animation-duration: 2s; } 

 <div id="container" class="hidden"> <div id="example">My example text</div> </div> <button onclick="enlarge()">Submit</button> 

您確定每次單擊“提交”按鈕時都在運行放大功能嗎？

根據您的expand（）函數采用“ response”參數這一事實來判斷，我假設您正在AJAX請求的響應處理程序中使用它-如果AJAX請求返回一個錯誤的錯誤代碼，表格已經提交過一次？ 如果將此函數附加到onSuccess（）方法上，則可以解釋為什么它只播放一次動畫。 該請求只會在第一次單擊該按鈕時“成功”。