我正在实施一个项目，我想当我的checkbox是checked，书的名字和按钮被隐藏，但当我想添加transition到这个过程中它不被应用，所以有什么问题?P.N:当我想通过dom添加或删除一本书时，我也有同样的问题。
代码:
//JS
document.addEventListener("DOMContentLoaded",()=>{
//deletion
let main=document.querySelector("main");
main.addEventListener("click",event=>{
if(event.target.matches(".bookButton")){
event.target.parentElement.parentElement.removeChild(event.target.parentElement)
//event.target.parentElement.style.transition="all 10s";
}
});
//hide section
let hide=document.querySelector(".hide input[type=checkbox]");
hide.addEventListener("change",()=>{
if(hide.checked) main.style.display="none";
else main.style.display="initial";
})//CSS
/*main*/
main{
transition: display 1s;
}
.book{
display: grid;
grid-template: 1fr/repeat(2,1fr);
justify-items: center;
align-items: center;
}
.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;
}//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">
<!--rel role-->
<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&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>您只能转换使用数值的属性(如width,opacity,flex-grow,color等)- [CSS可动画属性的广泛列表]。例如，CSS中的display属性不属于这些属性之一，因此您不能过渡到DOM中删除或添加元素。
你可以在这里找到这些信息。