[分享]css3动画还没执行完就移除类

在许多Web开发项目中，CSS3动画是一种非常有用的工具，可以为网页和应用程序添加吸引人的视觉效果。但是，在某些情况下，当您试图使用JavaScript动态添加或删除类来控制CSS3动画时，您可能遇到...

在许多Web开发项目中，CSS3动画是一种非常有用的工具，可以为网页和应用程序添加吸引人的视觉效果。但是，在某些情况下，当您试图使用JavaScript动态添加或删除类来控制CSS3动画时，您可能遇到“动画被中断”的问题。

具体来说，如果您在动画开始后立即将与动画相关联的类删除，则动画将会立即停止，而不是继续执行到结束。这可能会导致非常不利的视觉效果，因为页面元素将不再移动或转换到它们应该到达的位置。

为了解决这个问题，您需要应用一些技巧，以确保您的CSS3动画在移除类之前有效。以下是一些可行的方法：

// 方法一：使用setTimeout延迟以等待动画完成

const element = document.getElementById('my-element');
element.classList.remove('my-animation-class');
setTimeout(function() {
    // 执行其他操作
}, 1000);

// 方法二：使用animationend事件

const element = document.getElementById('my-element');
element.addEventListener('animationend', function() {
    element.classList.remove('my-animation-class');
    // 执行其他操作
});

// 方法三：使用requestAnimationFrame，同时检查动画是否正在运行

const element = document.getElementById('my-element');
let animationId;

function removeClassWhenAnimationFinished() {
    if (!element.classList.contains('my-animation-class')) {
        window.cancelAnimationFrame(animationId);
        // 执行其他操作
        return;
    }
    animationId = window.requestAnimationFrame(removeClassWhenAnimationFinished);
}
animationId = window.requestAnimationFrame(removeClassWhenAnimationFinished);
element.classList.remove('my-animation-class'); 

您可以根据您的具体情况选择其中的一个或多个方法，以确保您的CSS3动画执行完毕后再移除与动画相关的类。