要配合CSS動畫使用removeClass,可以先為要移除的元素添加一個帶有動畫效果的CSS類,然后使用JavaScript的removeClass方法將這個類移除。這樣就能實現在移除元素時觸發CSS動畫效果。
例如,假設有一個按鈕,點擊按鈕后要移除一個div元素并觸發動畫效果。可以先定義一個CSS類,命名為“fadeOut”并添加動畫效果,然后在JavaScript中使用removeClass方法將這個類添加至要移除的元素。
CSS代碼:
.fadeOut {
animation: fadeOut 1s ease-in-out;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
HTML代碼:
<button id="removeButton">Remove Element</button>
<div id="elementToRemove">This is the element to be removed</div>
JavaScript代碼:
document.getElementById("removeButton").addEventListener("click", function() {
var element = document.getElementById("elementToRemove");
element.classList.add("fadeOut");
setTimeout(function() {
element.remove();
}, 1000); //等待動畫效果完成后移除元素
});
在這個例子中,點擊按鈕后會為要移除的元素添加“fadeOut”類,觸發CSS動畫效果,然后等待1秒后再移除元素。這樣就實現了在移除元素時配合CSS動畫效果的效果。