在视口中触发多个 svg 线动画

Question

此 jsfiddle https://jsfiddle.net/20zhrw1o/1/ 展示了如何在视口中触发 svg 线条动画。我在我的（webflow）网站上工作。但是，如果我在一页上有多个 svgs 同时不可见，我该怎么办？目前只有第一个被触发。

在此先感谢您的帮助！

这是 javascript 部分，它切换 svg 的 css 以启动动画。

var svg = document.querySelector('svg');

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  var isOutside = (rect.top >= window.innerHeight) || (rect.bottom <= 0);
  return !isOutside;
}

window.addEventListener('scroll', function(e) {
  svg.classList.toggle('in-view', isElementInViewport(svg));
});

Answer 1

使用 document.querySelectorAll 并遍历返回的 NodeList：

var svg = document.querySelectorAll('svg');

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  var isOutside = (rect.top >= window.innerHeight) || (rect.bottom <= 0);
  return !isOutside;
}

window.addEventListener('scroll', function(e) {
  svg.forEach(function(el) {
    el.classList.toggle('in-view', isElementInViewport(el));
  });
});

此外，考虑使用 IntersectionObserver，它被认为比监听 scroll 事件的性能更高。

在视口中触发多个 svg 线动画

Trigger multiple svg line animations when in viewport

javascript

css

viewport

dom-events

svg-animate