使用 CSS 使元素在每次调用 onClick 函数时淡入

Question

页面上的每一次点击都会显示一个新的经文元素。现在我试图让不同的 Textparts 淡入。有没有一种简单的方法可以用我的 CSS 来做到这一点？我已经尝试添加

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>

我是否需要更改 JavaScript 中调用以显示块中经文的行？我已经用 el.style.opacity 试过了，但没用。我希望有一个更简单的解决方案。

Answer 1

太多的代码试图做同样的事情......太混乱了，你也有不必要的内联样式弹出。从好的方面来看，CSS 看起来很准确。通过专注于满足您的 objective 的单一方式进行简化，即每次点击添加一个 class 到下一个标签，直到剩下 none。

首先声明一些您希望在事件处理程序（注册到事件的函数）完成后保留的变量。一旦一个函数结束，它的所有变量都会被垃圾收集，如果有任何值（比如已经发生了多少次点击）它会回到它的初始值。参见 closures。

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

接下来，注册一个祖先标签（包含所有<cite>的标签，其中包括window、<html>标签、document、<body> 标签等）添加到“点击”事件中。开始定义事件处理程序，注意，所有事件处理程序都传递 Event Object.

document.onclick = reveal;

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

然后在事件处理程序中，确保它在完成所有 <cite> 后停止。

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

最后，应用当前计数器值作为引号数组的索引号并添加.fadeIn class。最后一项任务是将计数器加 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: '[=15=]275d';
  font-size: 1.25rem;
  margin-right: 0.5ch;
  color: #aaa;
}

q::after {
  content: '[=15=]275e';
  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>

使用 CSS 使元素在每次调用 onClick 函数时淡入

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

html

javascript

css

css-transitions

web