removeClass如何配合CSS动画 - 问答

要配合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动画效果的效果。

0 赞

0 踩