我做了一个简单的幻灯片放映，div个一个堆叠在另一个上面.
我把显示的div换成display:none或display:block.
但当我添加动画时，我遇到了一个问题.淡入效果很好，但我不知道如何淡出正在消失的幻灯片.幻灯片就这样消失了，我找不到任何有效的淡出方法.请问错误在哪里？
let pages = document.getElementsByClassName("page");
let buttons = document.getElementsByClassName("page-button");
let currentPage = 0;
pages[currentPage].style.display = "block";
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", () => changePage(i));
}
function changePage(k) {
pages[currentPage].style.display = "none";
pages[k].style.display = "block";
currentPage = k;
}.content-container {
display: flex;
height: 90vh;
}
.page {
position: absolute;
display: none;
width: 100%;
height: 100%;
animation: fadeIn 3s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#slideshow {
flex-grow: 1;
position: relative;
}<div class="content-container">
<div id="slideshow">
<div class="page" style="background-color: red;"></div>
<div class="page" style="background-color: green;"></div>
<div class="page" style="background-color: blue;"></div>
</div>
<button class="page-button">1</button>
<button class="page-button">2</button>
<button class="page-button">3</button>
</div>