1

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 class="banner">
  <div id="verses">
    <div class="verse1" style="display: none">Lorem Ipsum.</div>
    <div class="verse2" style="display: none">Lorem Ipsum.</div>
    <div class="verse3" 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.

3
  • 2
    Please create minimal reproducible example Use SO fiddle...
    – ikiK
    Apr 17, 2022 at 11:09
  • Do you click different elements or just one element and a new verse appears each time?
    – zer00ne
    Apr 17, 2022 at 12:03
  • @zer00ne Just a clicks on the whole site/document. So where ever you click on the page the only thing which happens is that a new verse appears.
    – maybe_JPEG
    Apr 17, 2022 at 12:13

1 Answer 1

0

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 👍. Simplify by focusing on a single way to meet your objective which is adding a class with each click to the next tag until there's none left.

First declare some variables that you want to persist after your event handler (a function that is registered to an event) has finished. Once a function ends, all of it's variables are garbage collected and if there were any values (like how many clicks already occurred) it would be back to it's initial value. See closures.

let counter = 0;
const quotes = [...document.querySelectorAll('cite')];
// Collect all <cite> tags into a NodeList then convert it into an array

Next, register an ancestor tag (a tag that contains all of the <cite>s, that includes window, <html> tag, document, <body> tag, etc.) to the "click" event. Start defining the event handler, note, all event handlers pass the Event Object.

document.onclick = reveal;

function reveal(event) {//...
 //reveal is the event handler

Then in the event handler, make sure that it stops once it has been through all of the <cite>s.

//...
if (counter >= quotes.length) {
  return
}
//...

Finally, apply the current counter value as the index number of the quotes array and add the .fadeIn class. The very last task is to increment the counter by 1.

//...
  quotes[counter].classList.add('fadeIn');
  counter++;
}

let counter = 0;
const quotes = [...document.querySelectorAll('cite')];

document.onclick = reveal;

function reveal(e) {
  if (counter >= quotes.length) {
    return
  }
  quotes[counter].classList.add('fadeIn');
  counter++;
}
html {
  font: 2ch/1.25 'Segoe UI'
}

cite {
  display: block;
  width: 60%;
  max-width: 540px;
  margin: 20px auto 30px;
  text-indent: -1.5ch;
  opacity: 0;
}

.fadeIn {
  animation: fadeIn 1.5s ease-out forwards;
}

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

q,
b {
  display: block;
}

q::before {
  content: '\00275d';
  font-size: 1.25rem;
  margin-right: 0.5ch;
  color: #aaa;
}

q::after {
  content: '\00275e';
  font-size: 1.25rem;
  color: #aaa;
}

b {
  text-align: right;
}
<header>
  <h1>Click Anywhere!</h1>
</header>
<main>
  <cite><q>Whenever you find yourself on the side of the majority, it is time to pause and reflect.</q>
  <b>Mark Twain</b></cite>

  <cite><q>Insanity: doing the same thing over and over again and expecting different results.</q>
  <b>Albert Einstein</b></cite>

  <cite><q>The journey of a thousand miles begins with one step.</q> 
  <b>Lao Tzu</b></cite>

  <cite><q>That which does not kill us makes us stronger.</q> 
  <b>Friedrich Nietzsche</b></cite>
</main>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.