Jquery 如何检测css3转换结束事件

因此，我想创建一个垂直滑块，用于

mouseweel

事件。这是我的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>

以及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();
});

（函数（$）{
$.fn.FullScreensSlider=函数（）{
var parentDiv=$（“#项目”）；
var slides=parentDiv.children（）；
var i=0；
var-domouseheel=true；
$（幻灯片）。每个（函数（）{
$（this）.on（'WebKittTransitionEnd otTransitionEnd otTransitionEnd otTransitionEnd msTransitionEnd transitionend transitionend msTransitionEnd transitionend transitionend），函数（事件）{
log（“set-domousevent-true”）；
domouseheel=true；
});
});
函数init（）{
$（“body”）.removeClass（“移位”）.css（“溢出”、“隐藏”）；
$（幻灯片）.addClass（“活动”）；
scrollEventListener（）；
}
函数scrollEventListener（）{
$（窗口）.unbind（）.bind（“鼠标滚轮”，函数（事件）{
var delta=event.originalEvent.wheelDelta | | event.wheelDelta；
如果（doMouseWheel&&delta>=0）{
domouseheel=false；
console.log（“向上滚动”）；
$（幻灯片[i]）.addClass（“活动”）；
我--；
}
if（doMouseWheel&&delta<0）{
domouseheel=false；
console.log（“向下滚动”）；
$（幻灯片[i]）。removeClass（“活动”）；
i++；
}
如果（i+1==$（幻灯片）.length）{
$（“body”）.addClass（“移位”）.css（“溢出”、“自动”）；
}否则{
$（“body”）.removeClass（“移位”）.css（“溢出”、“隐藏”）；
}
返回false；
})
}
init（）；
}
})（jQuery）；
$（函数（）{
$（“#项目”）.FullScreenSloider（）；
});

---

我使用doMouseWheel变量来防止多重幻灯片动画。但检测css3转换结束时存在问题，因为它不能正常工作。所以，如何检测css动画的结束以再次允许动画或检测鼠标滚轮事件结束？

当您声明“它无法正常工作”时，您的意思是什么？事件是否会发生？您确定您的处理程序已绑定并且已绑定到正确的事件吗？似乎转换结束不起作用，因为两张幻灯片同时进行动画制作。我想得到像在网站上的效果

(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();
});