javascript - 当使用 jQuery 可见页面部分时触发图像动画

Question

我有一个链接按钮可以链接到我的页面的一部分。单击它或滚动到页面的该部分时，我想将类 fadeInUpAnimation 添加到下面的 img 元素中。图像开始时的不透明度应该为 0——我想我可以在添加动画类之前将不透明度设置为 0。

<img src="img/circle-portrait-small.png" class="portrait">

这是动画:

@keyframes fadeInUp {
  from {
    /* x, y axis */
    transform: translate(0, 80px);
    opacity: 0;
  }

  to {
    transform: translate(0, 0);
    opacity: 1
  }
}

.fadeInUpAnimation {
  animation-duration: 1.5s;
  animation-name: fadeInUp;
}

我更喜欢 jQuery 方法，因为我已经有一个 jQuery 文件，但这不是必需的。

有什么建议吗？

Answer 1

这将是 JavaScript 的一个很好的用例 IntersectionObserver应用程序接口(interface)。虽然它是一项相对较新的技术，但它具有 84%采用并且比检查滚动处理程序中每个元素的位置更有效。

我还建议用过渡替换动画，因为过渡是专门为这种一次性介绍动画量身定制的。通过删除一个隐藏元素的类而不是添加一个显示它的类，我们可以确保动画只发生一次，即当元素第一次滚动到 View 中时.如果您向外滚动元素，这也将防止您的元素弹回到 -80px 转换，而我们无需进行任何额外工作。

长话短说——如果您想要性能，IntersectionObserver 是必经之路。如果您关心 100% 的浏览器支持，这可能不适合您。 84% 的支持主要是由于人们使用旧版本的主要浏览器。一旦人们和公司更新，这将成为标准。

注意:我认为 Stack Snippet 有点困惑，但如果您在运行它后单击“完整页面”链接，它会正常显示。如果您在执行此操作后缩小视口(viewport)，您可以看到它们完全按照预期一次一个地出现。

const intersect_opt = {
  root: null,
  rootMargin: '80px',
  threshold: 1.0
};

const intersect_observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(entry => {
    if (entry.intersectionRatio === 1) {
      entry.target.classList.remove("hidden");
    }
  });
}, intersect_opt);

document.querySelectorAll(".box").forEach(e => {
  intersect_observer.observe(e);
});

.box {
  width: 100px;
  height: 100px;
  background: forestgreen;
  transition: opacity 1.5s linear, transform 1.5s linear;
}

.hidden {
  opacity: 0;
  transform: translate(0, 80px);
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra nulla at libero efficitur, non tristique felis mollis. Curabitur mollis ipsum in porttitor facilisis. Mauris vulputate magna non sapien ornare pharetra. Vestibulum ac vestibulum massa, ac dignissim justo. Nulla eu purus erat. Curabitur iaculis porttitor ex. Nulla elementum elit sit amet odio faucibus lacinia. Sed a fringilla lectus. Pellentesque accumsan ipsum id lectus molestie consectetur. Sed leo orci, vehicula nec dolor vitae, malesuada hendrerit ex. Morbi elementum ante eu sapien vestibulum, ac imperdiet velit sagittis. Nulla imperdiet ultrices interdum. Nulla interdum dui eu nisl fringilla, non facilisis ipsum maximus. Mauris aliquam ullamcorper justo sit amet eleifend.</p>
<div class="box hidden"></div>

<p>Phasellus eu ipsum eget erat laoreet tincidunt ac sit amet justo. Donec malesuada consectetur porta. Maecenas pretium urna eu malesuada posuere. Duis in sem tincidunt, tempor urna nec, vulputate eros. Curabitur ex enim, bibendum sit amet sem nec, viverra semper mauris. Aenean euismod consectetur condimentum. Fusce sit amet ante nulla. Curabitur auctor libero blandit semper rhoncus.</p>
<div class="box hidden"></div>

<p>Suspendisse cursus ullamcorper magna et pellentesque. Donec nec risus vehicula ex suscipit ultrices. Mauris et tincidunt turpis, dignissim iaculis metus. Sed condimentum orci non lectus fermentum facilisis. Pellentesque vel dignissim elit. Nullam cursus lobortis ante et tristique. Integer consectetur justo ipsum, et iaculis ligula volutpat eu. In non nisi eu ex rhoncus tincidunt.</p>
<div class="box hidden"></div>

<p>Sed sagittis tincidunt tellus, ut blandit diam molestie vel. Praesent cursus dolor nisl, et laoreet nisl mattis vitae. Vivamus porta vel lorem in consectetur. Nulla rutrum, odio viverra sodales cursus, sem velit ultrices mi, a ultrices ex tellus id ligula. Aenean venenatis dui lectus, id venenatis velit malesuada ac. Nunc ultricies fringilla sem in eleifend. Praesent dapibus eu risus et consequat. Duis felis felis, iaculis nec malesuada id, sagittis id augue. Fusce a hendrerit nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius commodo sem sit amet dignissim. Mauris venenatis sagittis quam et pellentesque. Suspendisse potenti.</p>
<div class="box hidden"></div>

<p>Donec in vehicula orci, non mollis erat. Sed luctus elementum est, sed accumsan diam porttitor vel. Nunc efficitur malesuada feugiat. Cras tempus vestibulum odio, et accumsan erat tincidunt nec. Nam vestibulum lectus suscipit diam tempor, vitae interdum elit cursus. Fusce accumsan libero vel congue efficitur. In feugiat, nibh placerat hendrerit suscipit, sapien nisi placerat augue, sed sodales nulla lacus iaculis velit. Nunc quis eros sit amet justo interdum iaculis. Proin auctor, eros ut aliquam rhoncus, dolor risus egestas sapien, eu facilisis est purus nec neque. Sed luctus tellus et mattis elementum. Etiam tempor justo ut viverra fermentum. Quisque pretium quam nibh, ut dictum est aliquam vitae. In hac habitasse platea dictumst. Quisque sit amet massa accumsan, ultricies libero quis, laoreet lectus. Donec gravida interdum mi in euismod. Duis aliquam lorem velit, sed maximus purus mattis eu.</p>