为什么 InteractionObserver 在我的网站上不起作用？

如何解决为什么 InteractionObserver 在我的网站上不起作用？

编辑：这篇文章已经过编辑，以标记对纯 JS InteractionObserver 实例的更新，该实例来自以前的 jQuery 装置，这使网站变得非常缓慢。

新问题是我设法让 Rickard 的想法在 Codepen 上进行了一些样式调整（进入时将 .hidden 更改为 inverse .visible 类），但对于我的生活，它不起作用在我的网站上。

具体来说，我认为不是切换的交叉点，我同时使用了 console.log 和提示来检查，即使逐字复制代码，它们也根本没有启动。

旧代码，用于上下文：

  // $(document).ready shorthand
  $("section,img,p,h1,h2,h3,h4,span").fadeIn("slow"); });

$(document).ready(function() {
  /* Every time the window is scrolled ... */
  $(window).scroll(function() {
    /* Check the location of each desired element */
    $("section,span").each(function(i) {
      var bottom_of_object = $(this).position().top + $(this).outerHeight();
      var bottom_of_window = $(window).scrollTop() + $(window).height();
      /* If the object is completely visible in the window,fade it in */
      if (bottom_of_window > bottom_of_object - 200) {
        $(this).animate({ opacity: "1" },1000),$(this).find('.lefttitle').animate({left:"0px"},1500);
        $(this).find('.righttitle').animate({right:"0px"},1500);
      }}); }); });

旧 CSS 标题

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;} }

解决方法

您滚动的每一个像素都会遍历许多元素，然后为 left 和 right 属性设置动画，这会强制重新计算所有对象并重新绘制。我会说浏览器跳过动画是因为发生了太多事情。

1. 不要滚动动画。使用 IntersectionObserver。
2. 请勿使用 left、right、top 或 bottom 制作动画。使用 transform: translate 制作动画（就像您的动画一样），它不会强制重新计算其他元素的位置。一个热修复是使用 transform3d 来激活硬件中的 3d 渲染。
3. 您不需要使用关键帧来制作动画。只需使用 transition，并向元素添加一个相关类，当intersectionObserver 触发时，该类会更改其位置或不透明度。

,

试图在@rickard-elimää 关注您，但由于我对 JS 的了解有限，遇到了一些麻烦。

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

void myFunction(int num1,int num2,int num3) {
int x,positive_sum;
x = 0,positive_sum = 0;
if (num1 > 0) {
    // here we deal with positive
    x++;
    positive_sum += num1;
}
if (num2 > 0) {
    x++;
    positive_sum += num2;
}
if (num3 > 0) {
    x++;
    positive_sum += num3;
}
cout << "From the entered numbers " << x << " of them are positive numbers"<<endl;
cout << "Sum of these " << x << " numbers is " << positive_sum << endl; }

我确定这有点错误——我想要它做的是检查一个隐藏元素是否在视图中，然后淡入。

这是我添加的 CSS 类，用于使过渡起作用，而不是动画：

// 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);

请记住，当元素进入视口时，我希望这个类保持不动，所以一旦它们淡入，它们就会留在里面！

,

IntersectionObserver 一开始可能很难理解。您在要触发观察者 (section) 的每个 (see 1) 元素上放置一个观察者。将它们视为添加到数组 (entries) 中。然后观察者触发并将数组作为参数提供给您，您需要遍历它们中的每一个以查看它们是否相交 (see 2)。

很抱歉没有用 JQuery 写这个，但我对它生疏了，因为 JQuery 在今天并不是真正必要的。

// 2
let observer = new IntersectionObserver((entries) => {
  let section;

  // The same as writing ...
  // entries.forEach(function(entry) {

  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      section = entry.target;
      section.classList.remove('hidden');
    }
  })
});

  // 1
document.querySelectorAll('section').forEach((section) => {
  observer.observe(section);
});

section {
  color: white;
  font-size: 20px;
  padding: 1rem;
  min-height: 100vh;
  transition: opacity 5s;
}

section.hidden {
  opacity: 0;
}

section > .text {
  transition: transform 4s;
}

section.hidden > .text {
  transform: translateX(-2rem);
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.black {
  background-color: black;
}

<section class="hidden blue">
  <div class="text">Something</div>
</section>

<section class="hidden red">
  <div class="text">Something,something</div>
</section>

<section class="hidden black">
  <div class="text">Last one,now!</div>
</section>