Difficulties with fade-out/in javascript animation for website content

Question

On my site, I have a container that holds multiple 'pages' of information. When a button is clicked, the current content page disappears and the next one appears on screen, allowing viewers to cycle through different windows of content on the same webpage. The buttons work perfectly, but I'm not having success with animating it. I want the text of the current page to move to the left and fade out while the next page fades in from the right. Here is what I have so far.

function fadeOutShowNext(currentId, nextId){
    const currentSection = document.getElementById(currentId);
    const nextSection = document.getElementById(nextId);

    currentSection.classList.add('fade-out');

    setTimeout(() => {
        currentSection.style.display = 'none';
        nextSection.style.display = 'block';
        
        nextSection.classList.remove('fade-out');
    }, 1000);

}

currentId and nextId are passed through from the button clicks. No problems there. Here is my fade-out class from my CSS:

.fade-out {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

As of right now, the text fades out like it should. However, if I try to add a similar fade-in class, it causes the fade-out effect to stop working. I've tried using ChatGPT for but it is not being any help at all. I'm not sure what I'm doing wrong. Everything in the current code makes sense to me but when trying to replicate the logic to add the additional effects, the fade-out animation just stops working. I would appreciate any assistance.

Answer 1

Here's something that you can use as a basic boilerplate. Feel free to experiment:

function fadeOutShowNext(currentId, nextId){
    const currentSection = document.getElementById(currentId);
    const nextSection = document.getElementById(nextId);
    currentSection.classList.add('fade-out');
    nextSection.classList.add('fade-in');
}
let current = 0;
document.querySelector("button").addEventListener("click", ()=>{
  if ( current >= 3 ){
    return alert("Ops! End of story.");
  }
  fadeOutShowNext(current,++current);
})

.fade-out {
    opacity: 0;
    transition: all 1s ease-in-out;
    left: -2000px !important;
}
.fade-in {
    display: block;
    opacity: 1;
    transition: all 1s ease-in-out;
    left: 50%;
}
section:first-child {
  display: block;
  left: 50%;
}
section {
  transform: translateX(-50%);
  position: absolute;
  top: 0;
  left: 2000px;
  width: 50%;
  height: 100%;
  margin: 0 auto;
  border: 1px solid;
}
main {
  text-align: center;
  position: relative;
  border: 1px solid red;
  left: 0;
  top: 0;
  height: 120px;
  overflow: hidden;
}
button {
  margin: 1rem auto;
  display: block;
  font-size: 1rem;
  padding: 0.25rem 2rem;
}

<main>
  <section id="0">A</section>
  <section id="1">B</section>
  <section id="2">C</section>
  <section id="3">D</section>
</main>
<button>Next</button>