Make elements fade In with every call of onClick function with CSS-CodePudding

With every Click on the page a new element of verses gets displayed. Now I am trying to let the different Textparts fade in. Is there an easy way to do this with my CSS? I already tried to add

document.addEventListener('click', myFunction);

let verses = document.querySelector("#verses").children

let count = 0

function myFunction() {
  Array.from(verses).forEach(el => el.style.display = "none")
  if (count < verses.length) {
    let el = verses[count]
    el.classList.add("animating")
    el.style.display = 'block'

    //This function runs when the CSS animation is completed
    var listener = el.addEventListener('animationend', function() {
      el.classList.remove("animating");
    });
    count  
    if (count === verses.length) count = 0
  }

#verses {
  position: relative;
  overflow: hidden;
  transition: opacity 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#verses.animating {
  animation: fadeIn 1s;
}

<div >
  <div id="verses">
    <div  style="display: none">Lorem Ipsum.</div>
    <div  style="display: none">Lorem Ipsum.</div>
    <div  style="display: none">Lorem Ipsum.</div>
  </div>

Do I need to change lines in JavaScript which are calling to display the verses in block? I already tried it with el.style.opacity which didn't work. I hope there is an easier solution to this.

CodePudding user response：

Too much code trying to do the same thing...too confusing, you also have inline styles popping off unnecessarily. On the bright side the CSS looks spot on