DOM操作中transition不生效求助：隐藏/删除元素过渡失效

问题1：Checkbox控制main显示隐藏时过渡不生效 #

display是离散属性，浏览器无法对它做插值计算，所以transition: display 1s完全不起作用。要实现平滑隐藏/显示，得用可过渡的属性组合，比如opacity + visibility，或者max-height + opacity。

问题2：删除书籍时过渡不生效 #

直接调用removeChild()会立刻把元素从DOM中移除，根本没给过渡动画留执行时间。得先触发过渡效果，等动画结束后再删除元素。

修改后的完整代码 #

HTML（结构无需改动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./cssPage.css">
    <link rel="stylesheet" href="./normalize.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&amp;display=swap" rel="stylesheet">
    <title>Book your book here!</title>
</head>
<body>
    <div class="adjust">
        <div class="whole">
            <header>
                <h1 id="header">Book Booking Site</h1>
                <h2 id="sub-text">Add and Delete Books Here!</h2>
                <form action="" class="search">
                    <input type="text" placeholder="Search here...">
                </form>
            </header>

            <main>
                <div class="book">
                    <p class="bookText">Harry Potter</p>
                    <button class="bookButton">Delete</button>
                </div>
                
                <div class="book">
                    <p class="bookText">Lord of The Ring</p>
                    <button class="bookButton">Delete</button>
                </div>    
            </main>
            <footer>
                <div class="hide">
                    <input type="checkbox" id="hide">
                    <label for="hide">Hide All</label>
                </div>
            </footer>
        </div>
    </div>

    <script src="javascriptPage.js"></script>
</body>
</html>

CSS（调整过渡属性并添加动画类）

/*main*/
main{
    opacity: 1;
    visibility: visible;
    max-height: 2000px;
    transition: opacity 0.5s ease, visibility 0.5s ease, max-height 0.5s ease;
}

main.hidden{
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
}

.book{
    display: grid;
    grid-template: 1fr/repeat(2,1fr);
    justify-items: center;
    align-items: center;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.book.deleting{
    opacity: 0;
    transform: translateX(-20px);
}

.bookText{
    grid-row: 1;
    grid-column: 1;
    font-size: 1.3rem;
}

.bookButton{
    grid-row: 1;
    grid-column: 2;
    cursor: pointer;
    font-size: 1.3rem;
}

.hide{
    display:flex;
    justify-content: center;
    margin:.5rem 0 .8rem 0;
}
.hide label{
    margin-left: .5rem;
    font-size: 1.3rem;
}

JS（修改隐藏和删除逻辑）

document.addEventListener("DOMContentLoaded",()=>{
    // 删除书籍逻辑
    let main=document.querySelector("main");
    main.addEventListener("click",event=>{
        if(event.target.matches(".bookButton")){
            const bookItem = event.target.parentElement;
            bookItem.classList.add('deleting');
            // 监听过渡结束，动画完成后删除元素
            bookItem.addEventListener('transitionend', () => {
                bookItem.remove();
            }, { once: true });
        }
    });

    // 隐藏全部逻辑
    let hideCheckbox=document.querySelector(".hide input[type=checkbox]");
    hideCheckbox.addEventListener("change",()=>{
        main.classList.toggle('hidden', hideCheckbox.checked);
    })
});

内容的提问来源于stack exchange，提问作者scorpian111