jquery - 通过 jQuery-add 类触发的 CSS 转换不会因新事件而中断

Question

我有一个转换(opacity 和 translate)在滚动事件触发时删除类时被触发。到目前为止一切顺利。

问题是快速向外滚动和在视口(viewport)区域滚动(分别添加和删除类)不会给浏览器足够的时间来这样做。

我不确定这是否是转换的正确行为，也就是说，它们在进行时不能被打断并重新启动，或者我忘记了什么。

问题是它使视口(viewport)区域留空，并且很明显类没有被删除，因此转换没有重新激活，方法是在 JS 执行其业务时检查开发工具中的 DOM。我认为这可能是我的理论而不是代码的差距，但欢迎任何帮助。

注意:我还没有审查代码，所以请不要在这一层考虑重复的选择器和 DOM 查询，也不要考虑一些注释。

HTML 只不过是删除了类的 DIV。

CSS

.moveOutwardLeft {
    transition: all 1700ms;
    transform: translateX(-58%);
    opacity: 0;
}

.moveOutwardRight {
    transition: all 1700ms;
    transform: translateX(58%);
    opacity: 0;
}    

jQuery

siteSettings.$this.scroll(function () {

    var window_scrollTop = siteSettings.$this.scrollTop(),
        h2Portfolio = $("#contact").find("h2"),
        h4Offset = $("#about").find("h4").offset().top,
        downColumnMarginBottom = $(".down-column").css("margin-bottom");

    downColumnMarginBottom = parseFloat(downColumnMarginBottom);

    var leavingViewport = h2Portfolio.offset().top - downColumnMarginBottom,
        opacity = $(siteSettings.$firstChild).css("opacity");

    // Reveals the websites that leave the viewport

    if (window_scrollTop >= h4Offset && window_scrollTop < leavingViewport && opacity == 0) {

        //$(".left-side").addClass("moveInwardLeft");
        //$(".right-side").addClass("moveInwardRight");
        $(siteSettings.$firstChild).removeClass("moveOutwardLeft");
        $(siteSettings.$lastChild).removeClass("moveOutwardRight");
    }

    // Slides back and hides the websites that leave the viewport

    if (window_scrollTop >= leavingViewport || window_scrollTop < h4Offset) {

        $(".left-side").addClass("moveOutwardLeft");
        $(".right-side").addClass("moveOutwardRight");
        //$(siteSettings.$firstChild).removeClass("reveal-content");
        //$(siteSettings.$lastChild).removeClass("reveal-content");
    }

    var move = $(".first-child").hasClass("moveOutwardLeft");
    if (window_scrollTop < h4Offset || window_scrollTop >= leavingViewport && move == false) {

        $(".left-side").addClass("moveOutwardLeft");
        $(".right-side").addClass("moveOutwardRight");
    }

}); // end scroll

Answer 1

我刚发现问题，第一个条件中的 opacity == 0 是问题的原因。

通过设置opacity == 0作为条件，每次元素离开视口(viewport)都需要一些时间来完成转换，也就是说，到opacity是重置为 0。如果在视口(viewport)中向外和向后的滚动移动速度快于完成转换所花费的时间，则条件不匹配导致视口(viewport)为空，直到在视口(viewport)区域内触发新的滚动事件.