javascript - IntersectionObserver 一次加载所有内容

问题描述

我正在尝试使用 IntersectionObserver 设置文本动画，每次向下滚动时文本进入视口时都会触发文本动画并显示文本。问题是观察者会在第一个列表出现的那一刻加载整个项目动画列表，而无需一直向下滚动......我只希望动画只有在我向下滚动时才会触发..任何使固定？

//list -2
let listTargets = [...document.querySelectorAll('.wrapper-1 > ul > li')];


let options = {
    root: null,
    rootMargin: '-10%',
    threshold: 0.2,
};
let observer = new IntersectionObserver(list, options);

function list(entries, observer) {
    entries.forEach((entry) => {
        // if the element is intersecting do the following
        if (entry.isIntersecting) {
            //select all spans inside list (variant 2)
            let items = [...document.querySelectorAll('.wrapper-1 > ul > li > span')];
            // for each item(span with a letter) inside the list we set a timeout P/S/ idx =index of element
            items.forEach((item, idx) => {
                setTimeout(() => {
                    // add the active class to each span letter
                    item.classList.add('active');
                }, idx * 10);
            });
        }
    });
}


listTargets.forEach((target) => {
    //creat empty string
    let newString = '';
    //split the text inside span to an array of letters
    let itemText = target.children[0].innerText.split('');
    //creat each span for each letter if there's a space creat an empty span for it
    itemText.map(
        (item) =>
            (newString +=
                item == ' ' ? `<span class="space"></span>` : `<span>${item}</span>`)
    );
    //put the new string inside list HTML DOM
    target.innerHTML = newString;
    //observe the target
    observer.observe(target);
});

@import url("https://fonts.googleapis.com/css2?family=Rationale&display=swap");
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

body {
  font-family: "Rationale";
  background-color: #161616;
  color: #fff;
  font-size: 14px;
  overflow-x: hidden;
}

.main {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main .title {
  font-size: 15em;
  text-transform: uppercase;
  font-weight: 700;
}
.main .wrapper-1 {
  position: absolute;
  left: 5%;
  top: 100vh;
}
.main .wrapper-1 ul li {
  list-style: none;
  font-size: 3.5rem;
  margin-top: 0.5em;
  cursor: pointer;
  overflow: hidden;
}
.main .wrapper-1 ul li span {
  transform: translateY(100%);
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
}
.main .wrapper-1 ul li span.active {
  transform: translateY(0%);
  transition: 1s ease-out;
}
.main .wrapper-1 ul li span.space {
  margin-left: 0.2em;
}
.main .wrapper-1 ul li:hover {
  opacity: 0.5;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <link rel="stylesheet" href="./style.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div class="main">
            <div class="title">welcome</div>
            <div class="wrapper-1 title--box-2">
                <ul>
                    <li><span>Him dominion</span></li>
                    <li>
                        <span> Shall upon creature created midst him image you. </span>
                    </li>

                    <li><span>Heaven. Whose.</span></li>
                    <li><span>It image open which.R</span></li>
                    <li><span>Form evening.</span></li>
                    <li><span>Don't cattle moved.</span></li>
                    <li><span>Dry, morning.</span></li>
                    <li><span> May herb.</span></li>
                    <li><span>Female divided yielding.</span></li>
                    <li><span> Don't cattle moved.</span></li>
                    <li><span>Sixth signs blessed.</span></li>
                    <li><span>Second. Were.</span></li>
                    <li><span>Sea above.</span></li>
                    <li><span>Greater. Spirit his.</span></li>
                    <li><span>Signs lesser. </span></li>
                    <li><span>First them subdue.</span></li>
                    <li><span>Was open from.</span></li>
                    <li><span>Fruit one. </span></li>
                </ul>
            </div>
        </div>
    </body>
    <script src="./index.js"></script>
</html>

标签： javascript

javascript - IntersectionObserver 一次加载所有内容

问题描述

解决方案

推荐阅读