css技巧 - CSS如何为元素销毁添加动画效果？

Question

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

.test {   animation: fadeIn 0.5s linear;}

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

Answer 1

需要调整一下销毁元素的逻辑，触发元素销毁的操作不直接 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>

Answer 2

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

// 当需要销毁test元素时，先添加一个类document.querySelector('.test').classList.add('fadeOut');// 等待一段时间以确保动画完成，然后再真正移除元素setTimeout(function() {  // 真正移除元素  document.querySelector('.test').remove();}, 500); // 假设动画持续时间为0.5秒

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