jQueryを追加したクラスでトリガされたCSSトランジションが新しいイベントで中断されない

Question

スクロールイベントが発生したときにクラスの削除時にトランジション（opacityとtranslate）が発生しました。ここまでは順調ですね。

問題は、ブラウザをすばやくスクロールして、ビューポート領域（クラスを追加したり削除したりする）がブラウザに十分な時間を与えないことです。

これが遷移の正しい動作であるかどうかはわかりません。つまり、進行中に中断されずに再起動されたり、何か忘れてしまったりすることはありません。

問題は、ビューポート領域を空にして、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を設定することにより

は、毎回要素はopacityに出て、バックビューポートのスクロール運動の場合で0にリセットされ、すなわち、遷移が完了するため、それはいくつかの時間を要したビューポートを残し遷移の完了に要した時間よりも速かったため、条件が一致しなかったため、新しいスクロールイベントがビューポート領域内で発生するまで空のビューポートが発生しました。