i can't understand how to fade out the slides

Issue

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>

I made a simple slide show with divs stack on each other they swiching by display none/block but when i add animations I encountered a problem fade in works but i have no idea how to fade out for a vanishing slide It just disappears and i cant get any fade out method i find to work

Solution

For animation I use the library called Animate.css. Take a look at the following link:

https://animate.style/

You can install this library with NPM:

npm install animate.css --save

Then you can use this library like this:

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

Answered By - Fearcoder