Javascript 在Chrome中滚动到视图时，CSS动画未运行。类是'；t正在添加到元素中

当元素被滚动到视图中时，我有一个CSS关键帧动画激活，方法是将类添加到元素中，我只想在元素被滚动到视图中时设置动画。它在Firefox中可以正常工作，但由于某些原因，它在Chrome中无法正常工作。开发人员工具已经表明，即使元素在视图端口中，也没有向其添加

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”，函数（）{
var elements=document.queryselectoral（“.slide-in”）；
//交叉口观察器
var observer=新的IntersectionObserver（（条目）=>{
条目。forEach（（条目）=>{
如果（entry.intersectionRatio>0）{
entry.target.classList.add（“动画”）；
}否则{
entry.target.classList.remove（“动画”）；
}
});
});
元素。forEach（（el）=>{
观察者：观察者（el）；
});
});
。预滚动{
最小高度：100vh；
}
.集装箱{
最小高度：110vh；
}
.滑入{
位置：相对位置；
背景色：#333333；
高度：300px；
宽度：100%；
边缘底部：50px；
动画：动画单元0.7秒缓进缓出；
}
.slide-in.animate{
动画：设置0.7秒缓进缓出动画；
}
@关键帧设置动画{
0% {
不透明度：0；
转换：translateX（-20rem）；
}
100% {
不透明度：1；
变换：translateX（0rem）；
}
}
@关键帧动画单元{
0% {
不透明度：0；
转换：translateX（-20rem）；
}
100% {
不透明度：1；
变换：translateX（0rem）；
}
}

您确实应该考虑使用交叉点观察者来处理此问题。您可以发布当前使用交叉点观察者API的代码吗？您是否删除了所有jQuery逻辑？你不需要我的例子。是香草的。我还需要查看您正在使用的CSS，以查看动画中是否有错误。@jpsweeney94我从您发布的代码中创建了一个片段，它可以正确地将类添加到元素中。如果您能够解决这个问题，我将非常感谢您标记所回答的问题，以便其他人将来可以看到这个解决方案来帮助他们。让我们知道进展如何！：）很高兴能帮上忙！