Question

所以，我想创建一个适用于mousewheel事件的垂直滑块。这是我的HTML代码

<div id="projects">
    <section id="project-0" class="slide" style="background-color: #000000;"></section>
    <section id="project-1" class="slide" style="background-color: #f7f7f7;"></section>
    <section id="project-2" class="slide" style="background-color: #eeeeee"></section>
</div>

，CSS看起来像这样：

#projects {
  width: 100%
}
#projects .slide {
  position: absolute;
  background-attachment: fixed;
  height: 0;
  -webkit-transition: height 0.9s cubic-bezier(0.63, 0.64, 0.3, 1);
  -moz-transition: height 0.9s cubic-bezier(0.63, 0.64, 0.3, 1);
  -o-transition: height 0.9s cubic-bezier(0.63, 0.64, 0.3, 1);
  transition: height 0.9s cubic-bezier(0.63, 0.64, 0.3, 1);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0)
}  
  #projects .slide {
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: auto 90%
}

#projects .slide:nth-child(1) {
  z-index: 10
}

#projects .slide:nth-child(2) {
  z-index: 9
}

#projects .slide:nth-child(3) {
  z-index: 8
}

#projects .slide:nth-child(4) {
  z-index: 7
}
#projects .slide.no-animation {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important
}

#projects .slide.active {
  height: 100%
}

和javascript代码：

(function($){
    $.fn.fullScreenSlider  = function(){
        var parentDiv = $("#projects");
        var  slides = parentDiv.children();
        var  i = 0;
        var doMouseWheel = true;
        $(slides).each(function(){
          $(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(event) {
                console.log("set doMouseEvent true");
                doMouseWheel = true;
            });
        });
        function init(){
            $("body").removeClass("shifted").css("overflow","hidden");
            $(slides).addClass("active");
            scrollEventListener();
        }
        function scrollEventListener(){
            $(window).unbind().bind("mousewheel",function(event){
                var delta = event.originalEvent.wheelDelta || event.wheelDelta;
                if (doMouseWheel && delta >= 0) {
                    doMouseWheel = false;
                    console.log("Scroll up");
                    $(slides[i]).addClass("active");
                    i--;
                }
                if(doMouseWheel && delta < 0) {
                    doMouseWheel = false;
                    console.log("Scroll down");
                    $(slides[i]).removeClass("active");
                    i++;
                }
                if(i + 1 == $(slides).length){
                    $("body").addClass("shifted").css("overflow","auto");
                }else{
                    $("body").removeClass("shifted").css("overflow","hidden");

                }
                return false;
            })
        }
        init();
    }
})(jQuery);

$(function() {
    $("#projects").fullScreenSlider();
});

我使用doMouseWheel变量来防止多个幻灯片动画。但是检测css3转换结束存在问题，因为它无法正常工作。那么如何检测css动画的结束以再次允许动画或检测mousewheel事件结束？

如何检测css3转换结束事件

0 个答案: