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 >

        <div id="slideshow">
         <div  style="background-color: red;">

         </div> 
         <div  style="background-color: green;">

         </div>
         <div  style="background-color: blue;">

         </div>
        </div>
             <button  >1</button>
             <button  >2</button>
             <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

CodePudding user response：

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 style="background-color: green;">

CodePudding user response：

The issue is that you are using a display none, which will instantly remove the coloured block and fade in from white.

On click set the background colour of the 'content-container' to the item's colour to be removed, giving the impression of fading in from that colour.

    var contentContainer = document.getElementsByClassName("content-container");

    var replaceColour = pages[k].styles.getPropertyValue("background-color")
    
    contentContainer.style.backgroundColor = replaceColour;