我正在制作一個應用程序，其中復選框控制覆蓋是否出現在屏幕上。為了使出現和消失平滑，我添加了動畫。#overlay{    position:absolute;    height: 100vh;    width: 100vw;    background-color: white;    display:none;    animation-name: none;    animation-play-state: paused;    animation-fill-mode: forwards;    animation-duration: 1s;    opacity: 0;}@keyframes appear {    0%{opacity: 0}    100%{opacity: 1}}@keyframes disappear {    0%{opacity: 1}    100%{opacity: 0}}那么這里我用js來調用這些動畫。function handleChange(checkbox) {    const animation = document.getElementById("overlay");    if(checkbox.checked === true){        if (window.innerWidth < 846) {            animation.style.display="block";            animation.style.animationName="appear";            animation.style.animationPlayState = "running";            document.getElementById('overlay2').style.display="none";            disableScroll();        }        return false;    }else{        animation.style.animationName="disappear";        animation.style.animationPlayState="running";        animation.addEventListener('animationend', () => {            animation.style.display="none";            document.getElementById("overlay2").style.display="block";        })        enableScroll();        return false;    }}首次選中和取消選中時，動畫效果完美。但是，如果我重復此操作并第二次選中該框，它就會被壓碎。也許有一點幫助？謝謝你！