CSS如何为元素销毁添加动画效果？

Question

<div class="test">
    test
</div>

.test {
   animation: fadeIn 0.5s linear;
}

如上图所示，test元素在创建时会执行动画，那如果要在元素销毁时也执行一次动画，要怎么实现？

Answer 1

在元素销毁时也执行一次动画也可理解为元素执行某一动画后销毁:

// 当需要销毁test元素时，先添加一个类
document.querySelector('.test').classList.add('fadeOut');

// 等待一段时间以确保动画完成，然后再真正移除元素
setTimeout(function() {
  // 真正移除元素
  document.querySelector('.test').remove();
}, 500); // 假设动画持续时间为0.5秒

/* 添加一个用于退出动画的类 */
.fadeOut {
   animation: fadeOut 0.5s linear;
}

Answer 2

需要调整一下销毁元素的逻辑，触发元素销毁的操作不直接 remove 元素，而是添加淡出动画，在动画完成事件里面去 remove

.container {
    width: 100px;
    height: 100px;
    background-color: rgb(0, 255, 255);
    
}

.fade-in {
    animation: fadeIn 0.5s linear;
}

.fade-out {
    animation: fadeOut 0.5s linear forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

<div class="container fade-in"></div>
<button class="btn">remove</button>

<script>
    const btn = document.querySelector('.btn');
    const container = document.querySelector('.container');

    btn.addEventListener('click', () => {
        container.addEventListener('animationend', function() {
            container.remove(); // 在动画结束后移除容器元素
        })

        container.classList.remove('fade-in');
        container.classList.add('fade-out');
    })
</script>