javascript - 如何使用 CSS 动画淡出 div 幻灯片？

Question

我制作了一个简单的幻灯片放映，其中 div 一个叠一个地叠在一起。 我使用 display:none 或 display:block 切换显示的 div。

但是当我添加动画时，遇到了问题。淡入淡出有效，但我不知道如何淡出消失的幻灯片。幻灯片就消失了，我找不到任何我发现有效的淡出方法。请问哪里出错了？

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>

Answer 1

对于动画，我使用名为 Animate.css 的库。看看下面的链接:

https://animate.style/

您可以使用 NPM 安装此库:

npm install animate.css --save

然后你可以像这样使用这个库:

<div class="page animate__fadeOutLeft" style="background-color: green;">