滚动动画:所有未触发的类

Question

我有一个定制的CSS动画，当用户遇到页面上的元素时，它会模糊和褪色文本。我已经设置了一些JS，一旦看到了特定的元素，就会添加一个动画类。

我遇到的问题是，我有两组使用相同动画类的元素，而我拥有的脚本只触发了第一个：

      h1.blurry-text {
        font-size: 3rem;
        line-height: 1;
      }

      span.blurry-text-fade {
        animation: blur 0.5s ease;
        -webkit-animation: blur 0.5s ease;
        animation-delay: 1s;
        animation-fill-mode: forwards;
      }

      @keyframes blur {
        0% {
          color: transparent;
          text-shadow: 0 0 0px #1e1e1e;
        }
        50% {
          color: transparent;
          text-shadow: 0 0 5px #1e1e1e;
        }
        100% {
          color: transparent;
          text-shadow: 0 0 10px #1e1e1e;
          opacity: 0.3;
        }
      }

<h1 class="blurry-text">

    <span class="blurry-text-fade-hold">Blah Blah Blah Blah Blah Blah</span><br />
    This is important
    <span class="blurry-text-fade-hold">Blah Blah<br />
    Blah Bla Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
    </span>

</h1>

      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          const blurryText = entry.target.querySelector(
            ".blurry-text-fade-hold"
          );

          if (entry.isIntersecting) {
            blurryText.classList.add("blurry-text-fade");
            return;
          }
        });
      });

      observer.observe(document.querySelector(".blurry-text"));

基本上，我试图把所有的文字围绕“这是重要的”使用我的动画一旦滚动到视图。第一个<span>被激活，但下面的一个没有激活。我尝试过将entry.target.querySelector更改为entry.target.querySelectorAll，但随后我得到了一个错误，即classList未定义。

我做了小提琴，以防万一更容易看到。

Answer 1

querySelectorAll方法返回一个集合，然后为集合中的每个项设置类，如下所示：

​

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting)
      entry.target.querySelectorAll(
          ".blurry-text-fade-hold"
        ).forEach(blurryText => blurryText.classList.add("blurry-text-fade"));
      });
});

​