Javascript 如何仅在css元素出现在窗口上时设置其动画？

我知道有视差，但我想在这个网站上像其他东西

例如，我有这个代码
html

<div class="black-div"></div>
   <div class="animated-div">
       <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit temporibus fuga sit quam fugit! Dignissimos quis qui, praesentium id nihil, aspernatur nostrum, dolores dolor molestiae error molestias ipsum ipsam at.</h1>
   </div>

---

问题是，当我加载页面时，文本会变为动画，那么如何防止这种情况发生呢？

然后页面完全加载的延迟元素将改用jQuery

  setTimeout(function () {
  $("div").addClass("black-div").delay(2000).fadeIn(); 
  });

---

要检查图元是否在视图中，请使用。此API正是为此目的而构建的，只需使用

isIntersecting

值检查元素是否已进入视图，几乎不需要计算

每当元素进入或离开视图时，IntersectionObserverIn使用回调函数来执行某些操作。在这个函数中，您可以指定发生这种情况时应该发生什么

我已经制作了一个关于它如何工作以及如何实现它的示例片段。

/**
*当项目进入屏幕时该怎么办
*如果它在屏幕中，isIntersecting将为true。
*在创建类时添加该类。
*/
const intersectionCallback=（条目）=>{
for（const entry of entries）{//在进入或退出视图的所有元素上循环。
如果（entry.isIntersecting）{//当元素在视图中时，这是真的。
entry.target.classList.add（'show'）；//添加一个类。
}
}
}
/**
*创建一个观察者并将instersectionCallback用作
*元素进入时的操作说明
*还是离开视线
*/
const observer=新的IntersectionObserver（intersectionCallback）；
/**
*获取所有.item元素并循环它们。
*观察每个单独的项目。
*/
const items=document.querySelectorAll（'.item'）；
用于（项目的常数项）{
观察员.观察（项目1）；
}

.item{
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：#fff；
高度：200px；
宽度：100%；
边缘底部：20px；
不透明度：0；
过渡：不透明度1s缓解；
}
.项目：第n种类型（奇数）{
背景色：#333；
}
.项目：第n个类型（偶数）{
背景色：#111；
}
.item.show{
不透明度：1；
}

你好 你好 你好 你好 你好 你好

---

您好您不能仅仅通过CSS来实现这一点。您需要JS检查元素是否在视口中，然后应用给定的类名，即visible、inViewport或discovered，然后应用styles@ArberSylejmani那么你的意思是我需要添加一个事件监听器？？，如果是的话，那个事件会是什么？你可以使用getBoundingClientRect（）测试元素何时进入视口，然后向其动态添加类以执行动画@ecg8我刚刚读了那篇文章，回来想了解一下，哈哈，谢谢！过去我只是想把它做完，但我还是用了一些东西。对于更简单的东西，当你想变得更酷的时候，它很方便。享受修补！

  setTimeout(function () {
  $("div").addClass("black-div").delay(2000).fadeIn(); 
  });