我有一个CSS“.animated”类,默认情况下在所有“抽屉包装器”元素上设置,如下所示:
<div class="drawer-wrapper animated">
foo
</div>
我制作了一个函数,在动画完成后立即删除这个“动画”类,因为动画状态在以后的z索引中会出现问题。到目前为止,我的功能正常工作。
但函数的第二部分不起作用:我希望将“动画”类重新添加到“抽屉包装器”中,以防其他事件将其切换到“display:none”。这样,当重新切换回“显示:块”时,动画可以再次播放,然后再次删除,依此类推。以下是我的javascript:
function remove_and_add_animation() {
var i;
var a = document.querySelectorAll(".drawer-wrapper");
for (i = 0; i < a.length; i++) {
a[i].addEventListener("webkitAnimationEnd", function(){
this.classList.remove("animated")});
a[i].addEventListener("animationend", function(){
this.classList.remove("animated")});
if (
window.getComputedStyle(a[i]).display === "none"
) {
a[i].classList.add("animated")
}
}
}
addEventListener("change", function() {remove_and_add_animation(); });
非常感谢你!!