移动视口时出现基本Javascript动画错误

好吧，我有点问题。我在它上面放了一些基本的JS，以在不同元素进入视口时设置淡入动画，以及一些标题从右向左移动（反之亦然）

有趣的是，当重新加载页面时，左侧标题会设置动画，但当视口向下移动时，会停止设置动画向上移动页面时，它们确实起作用（如果我重新加载并快速向上移动）。就我所做的实验而言，正确的标题一直都很有效

以下是章节标题的外观：

    <h2 class="lefttitle">a zine on</h2>
      <a href="pages/beamsone.html">
        <img src="media/portfolio/beamsone.jpg" alt="beamsone"></a>
    <h2 class="righttitle">creative struggle.</h2>
  </section>

我已经检查了左和右瓷砖的.class是否保持一致，我已经检查了没有大的标点错误，所有这些

有关其他信息，请参见标题“视口前渲染”的隐藏位置：

h2.lefttitle {float:left; text-align:left; left:10px; top:6px;}
h2.righttitle {float:right; text-align:right; right:10px; top:-6px;}

下面是我用纯CSS制作的淡入动画：

h3, section.projdescription * {animation:fadeInUp 2s both ease;}
*.visible {animation:fadeInUp 4s both ease;}
@keyframes fadeInUp {
  0% {opacity: 0;transform: translate3d(0,10px,0);}
  100% {opacity: 1;} }

---

我相信这一切的解决方案必须非常明显，但我一点也不清楚，所以我希望有经验的人能给我一些指导

在滚动的每个像素上循环许多元素，然后设置

左

和

右

属性的动画，强制重新计算所有对象并重新绘制。我会说，浏览器跳过动画，因为有太多的事情正在进行

不要在滚动上设置动画。使用

不要使用

左

、

右

、

上

或

下

设置动画。使用

transform:translate

（与您的动画一样）设置动画，这不会强制重新计算其他元素的位置。热修复程序是使用

transform3d

激活硬件中的三维渲染

不需要使用关键帧来设置动画。当intersectionObserver触发时，只需使用并向元素添加一个相关类，即可更改元素的位置或不透明度

---

试图在这里跟随你@rickard elimä，但我对JS的有限知识遇到了一些麻烦

这是我用你刚才提出的想法构建的JS：

// create the observer function with the properties
let observer = new IntersectionObserver(callback, options);
// options of the interaction
let options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.5 }
// create the callback, or what happens when something enters viewport
let callback = (entries, observer) => {
$("element.classList.contains(className);").each(function(i){
    $(this).element.classList.add("visible");
  }}); });
// create target to observe
let target = document.element;
// call to observe target
observer.observe(target);

但我确信这有点错误–我希望它做的是检查是否有一个隐藏元素在视图中，然后将其淡入

下面是我添加的CSS类，用于使转换工作，而不是动画：

.hidden { opacity: 0; transition: opacity 2s, left 10px;}
.visible { opacity: 1;}

---

请记住，当元素进入视口时，我希望该类保持不变，因此一旦它们淡入，它们将保持不变

IntersectionObserver一开始可能很难理解。在要触发观察者的每个（

部分

）元素上放置观察者（

请参见1

）。将它们视为添加到数组（

条目

）。然后，观察者触发并将数组作为参数提供给您，您需要遍历其中的每一个，以查看它们是否相交（

请参见2

）

很抱歉没有在JQuery中写这篇文章，但我对它已经生疏了，因为JQuery在今天并不是真的必要

//2
让观察者=新的相交观察者（（条目）=>{
let段；
//和写作一样。。。
//entries.forEach（函数（entry）{
条目。forEach（（条目）=>{
if（输入。isIntersecting）{
节=entry.target；
节.classList.remove（'hidden'）；
}
})
});
// 1
document.queryselectoral（'section'）.forEach（（section）=>{
观察员：观察（第节）；
})；

部分{
颜色：白色；
字体大小：20px；
填充：1rem；
最小高度：100vh；
过渡：不透明度5s；
}
第1节隐藏{
不透明度：0；
}
节>.text{
转型：转型4s；
}
section.hidden>.text{
transform:translateX（-2rem）；
}
蓝先生{
背景颜色：蓝色；
}
瑞德先生{
背景色：红色；
}
布莱克先生{
背景色：黑色；
}

某物
什么，什么
最后一个，现在！

.hidden { opacity: 0; transition: opacity 2s, left 10px;}
.visible { opacity: 1;}