javascript - 在 Chrome 中滚动到 View 中时 CSS 动画不会运行。类未添加到元素中

Question

我有一个 CSS 关键帧动画，当元素滚动到 View 中时，通过将类添加到我想要仅在滚动到 View 中时才设置动画的元素来激活。它在 Firefox 中按预期工作，但由于某种原因它在 Chrome 中无法工作。开发人员工具显示，即使该元素位于视口(viewport)中，也没有添加 start 类。知道为什么这在 Chrome 中不起作用吗？

JQuery:

function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round($elem.offset().top);
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.parent-content-block .slide-in');

    // If the animation has already been started
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

// Capture scroll events
$(window).scroll(function () {
    checkAnimation();
});

document.addEventListener("DOMContentLoaded", function() {
  var elements = document.querySelectorAll(".slide-in");

  // Intersection observer
  var observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.intersectionRatio > 0) {
        entry.target.classList.add("start");
      }
    });
  });

  elements.forEach((el) => {
    observer.observe(el);
  });
});

<div>
  <img class="slide-in slide1" src="img.png">
  <div style="height: 200vh">
    scroll down
  </diV>
  <img class="slide-in slide1" src="img.png">
  <img class="slide-in slide2" src="img.png">
  <!-- other html... -->
</div>

Answer 1

我已经实现了一个基本的 Intersection Observer 供您查看。

document.addEventListener("DOMContentLoaded", function () {
    var elements = document.querySelectorAll(".slide-in");

    // Intersection observer
    var observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.intersectionRatio > 0) {
                entry.target.classList.add("animate");
            } else {
                entry.target.classList.remove("animate");
            }
        });
    });

    elements.forEach((el) => {
        observer.observe(el);
    });
});

.pre-scroll {
  min-height: 100vh;
}

.container {
    min-height: 110vh;
}

.slide-in {
    position: relative;
    background-color: #333333;
    height: 300px;
    width: 100%;
    margin-bottom: 50px;
    animation: animateInit 0.7s ease-in-out;
}

.slide-in.animate {
    animation: animate 0.7s ease-in-out;
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: translateX(-20rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0rem);
    }
}

@keyframes animateInit {
  0% {
        opacity: 0;
        transform: translateX(-20rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0rem);
    }
}

<div class="container">
  <div class="slide-in"></div>
  <div class="slide-in"></div>
  <div class="pre-scroll"></div>
  <div class="slide-in"></div>
</div>