当元素使用 getBoundingClientRect 或交叉点观察器进入视口时运行 function

Question

当 element.txt-anim 进入视口并想使用 getBoundingClientRect 或交叉点观察器时，我正在尝试运行名为 txtAnim 的 function

那可能吗？ 我没有让它工作

（我有 animation 工作，但我希望它在进入视口时触发）

 function txtAnim(speed){ jQuery('.txt-anim').css("opacity", "1"); var skills = jQuery('.txt-anim p').contents().filter(function() { return this.nodeType === 3; // only immediate text in div, not in span }).map(function() { var txt = "<span class='letter'>" + jQuery(this).text().split("").join("</span><span class='letter'>") + "</span>"; // console.log(txt); jQuery(this).replaceWith(txt); }); var i = 0; var span = jQuery('.txt-anim').find('span'); jQuery(".txt-anim p").empty(); typeWriter(); function typeWriter() { if (i < span.length) { jQuery('.txt-anim p').append(span[i]); i++; setTimeout(typeWriter, speed); }else{ console.log("text animation ended"); jQuery('.home-page-cities-mobile').css("opacity", "1"); jQuery('.flecha-home').css("opacity", "1"); } } } //Intersection Observer const textAnim = document.querySelector('.txt-anim'); let options = { root: textAnim, rootMargin: "0px", threshold: 1.0 }; let observer = new IntersectionObserver(txtAnim(20), options); observer.observe(textAnim);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="logo-message txt-anim"> <p> <span class="letter">L</span> <span class="letter">i</span> <span class="letter">q</span> <span class="letter">u</span> <span class="letter">i</span> <span class="letter">d</span> <span class="letter empty"> </span> <span class="letter">i</span> <span class="letter">d</span> <span class="letter">e</span> <span class="letter">a</span> <span class="letter">s</span> <span class="letter empty"> </span> <span class="letter">t</span> <span class="letter">o</span> <span class="letter empty"> </span> <span class="letter">g</span> <span class="letter">e</span> <span class="letter">t</span> <span class="letter empty"> </span> <span class="letter">a</span> <span class="letter">n</span> <span class="letter">y</span> <span class="letter">w</span> <span class="letter">h</span> <span class="letter">e</span> <span class="letter">r</span> <span class="letter">e</span> </p> </div>

任何人都可以帮忙吗？ 我已经尝试过使用交叉点观察者，因为我认为这会更容易

Answer 1

好的，所以您在这里使用交叉点观察器的方式存在一些问题。

首先，你的根是错误的。 您使用与尝试观察相同的元素作为root ，这意味着您在问一个问题， When does this element intersect with itself? 这显然不是一个非常有用的问题。

如果您希望它在您在视口中滚动到它时显示，您实际上根本不需要指定根。

其次，你没有检查你真正需要检查的东西： isIntersecting属性。 当交叉点观察者回调触发时，第一个参数是一个entries数组，每个条目都有一个isIntersecting属性，可以是真或假。

我已经制作了这个 jsfiddle，它可能接近于做你想做的事。

https://jsfiddle.net/xapjz2fe/

如您所见，我还添加了一项检查以确保 function txtAnim不会多次自行运行 - 没有该检查，如果您滚动到元素，然后滚动离开并向后滚动， txtAnim将运行第二次，它会搞砸一切。

 let txtAnimStarted = false; function txtAnim(speed){ if (txtAnimStarted) return; txtAnimStarted = true; console.log('starting txtAnim'); jQuery('.txt-anim').css("opacity", "1"); var skills = jQuery('.txt-anim p').contents().filter(function() { return this.nodeType === 3; // only immediate text in div, not in span }).map(function() { var txt = "<span class='letter'>" + jQuery(this).text().split("").join("</span><span class='letter'>") + "</span>"; // console.log(txt); jQuery(this).replaceWith(txt); }); var i = 0; var span = jQuery('.txt-anim').find('span'); jQuery(".txt-anim p").empty(); typeWriter(); function typeWriter() { if (i < span.length) { jQuery('.txt-anim p').append(span[i]); i++; setTimeout(typeWriter, speed); }else{ console.log("text animation ended"); jQuery('.home-page-cities-mobile').css("opacity", "1"); jQuery('.flecha-home').css("opacity", "1"); } } } //Intersection Observer const textAnim = document.querySelector('.txt-anim'); let options = { rootMargin: "0px", threshold: 1.0 }; let observer = new IntersectionObserver((entries) => { const entry = entries[0]; if (entry.isIntersecting) txtAnim(20); }, options); observer.observe(textAnim);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="margin-bottom:1000px">top div, scroll down</div> <div class="logo-message txt-anim" style="padding-bottom:20px"> <p> <span class="letter">L</span> <span class="letter">i</span> <span class="letter">q</span> <span class="letter">u</span> <span class="letter">i</span> <span class="letter">d</span> <span class="letter empty"> </span> <span class="letter">i</span> <span class="letter">d</span> <span class="letter">e</span> <span class="letter">a</span> <span class="letter">s</span> <span class="letter empty"> </span> <span class="letter">t</span> <span class="letter">o</span> <span class="letter empty"> </span> <span class="letter">g</span> <span class="letter">e</span> <span class="letter">t</span> <span class="letter empty"> </span> <span class="letter">a</span> <span class="letter">n</span> <span class="letter">y</span> <span class="letter">w</span> <span class="letter">h</span> <span class="letter">e</span> <span class="letter">r</span> <span class="letter">e</span> </p> </div>

我的 javascript 的缩进从 jsfiddle 复制过来被破坏了，对此感到抱歉