Jquery animationend在firefox中只触发一次

我想用css动画创建简单的滑块，并使用以下代码进行播放：。它似乎适用于除firefox之外我测试过的所有桌面浏览器。 在firefox中，由于某些原因，animationend事件只触发一次。你知道为什么animationend事件只在firefox中触发一次，但在其他浏览器中可以正常工作吗

CSS:

Javascript:

$(function() {

    var TransitionEffects   = (function() {

        var $teWrapper      = $('#te-wrapper'),
            $teCover        = $teWrapper.find('div.te-cover'),
            $teImages       = $teWrapper.find('div.te-images > img'),
            imagesCount     = $teImages.length,
            currentImg      = 0,
            $navNext        = $('#te-next'),
            $type           = $('#type'),
            type            = $type.val(),
            $teTransition   = $teWrapper.find('.te-transition'),
            animated        = false,
            // check for support
            hasPerspective  = Modernizr.csstransforms3d,
            init            = function() {

                $teTransition.addClass( type );
                $navNext.on( 'click', function( event ) {

                    if( hasPerspective && animated ) {
                        console.log('antimated: ' + animated);
                        console.log('hasPerspective: ' + hasPerspective);
                        return false;
                    }

                    animated = true;    
                    showNext();
                    return false;

                });



                if( hasPerspective ) {


                    $teWrapper.on({
                        'animationstart mozanimationstart oAnimationStart webkitAnimationStart' : function( event ) {
                            console.log('animationstart');

                        },
                        'animationend mozAnimationEnd oAnimationEnd webkitAnimationEnd' : function( event ) {

                            $teCover.removeClass('te-hide');
                            $teTransition.removeClass('te-show');
                            animated = false;
                            console.log('animationend');
                            console.log(event.animationName);
                            console.log(event.originalEvent.animationName);
                        }
                    });
                }                                   
            },
            showNext        = function() {

                if( hasPerspective ) {

                    $teTransition.addClass('te-show');
                    $teCover.addClass('te-hide');                   
                }

                updateImages();

            },
            updateImages    = function() {

                var $back   = $teTransition.find('div.te-back'),
                    $front  = $teTransition.find('div.te-front');

                ( currentImg === imagesCount - 1 ) ? 
                    ( last_img = imagesCount - 1, currentImg = 0 ) : 
                    ( last_img = currentImg, ++currentImg );

                var $last_img   = $teImages.eq( last_img ),
                    $currentImg = $teImages.eq( currentImg );

                $front.empty().append('<img src="' + $last_img.attr('src') + '">');
                $back.empty().append('<img src="' + $currentImg.attr('src') + '">');

                $teCover.find('img').attr( 'src', $currentImg.attr('src') );

            };

        return { init : init };

    })();

    TransitionEffects.init();

});

单击“下一步”按钮时，将使用动画效果更改图像

---

为什么它在firefox中不起作用？是firefox的bug还是什么？

摆弄一下你的代码：我在不同的浏览器上执行了它，事件并不是firefox中唯一的触发器。在其他浏览器中，它工作正常。你能解释一下你的意思吗？控制台中有任何错误。我的意思是在这里用您的代码做一个示例，这样我们就可以看到发生了什么：正如您所看到的，animateend事件在firefox中只触发一次，在其他浏览器中，如果我们多次单击“下一步”按钮，它就会工作。

$(function() {

    var TransitionEffects   = (function() {

        var $teWrapper      = $('#te-wrapper'),
            $teCover        = $teWrapper.find('div.te-cover'),
            $teImages       = $teWrapper.find('div.te-images > img'),
            imagesCount     = $teImages.length,
            currentImg      = 0,
            $navNext        = $('#te-next'),
            $type           = $('#type'),
            type            = $type.val(),
            $teTransition   = $teWrapper.find('.te-transition'),
            animated        = false,
            // check for support
            hasPerspective  = Modernizr.csstransforms3d,
            init            = function() {

                $teTransition.addClass( type );
                $navNext.on( 'click', function( event ) {

                    if( hasPerspective && animated ) {
                        console.log('antimated: ' + animated);
                        console.log('hasPerspective: ' + hasPerspective);
                        return false;
                    }

                    animated = true;    
                    showNext();
                    return false;

                });



                if( hasPerspective ) {


                    $teWrapper.on({
                        'animationstart mozanimationstart oAnimationStart webkitAnimationStart' : function( event ) {
                            console.log('animationstart');

                        },
                        'animationend mozAnimationEnd oAnimationEnd webkitAnimationEnd' : function( event ) {

                            $teCover.removeClass('te-hide');
                            $teTransition.removeClass('te-show');
                            animated = false;
                            console.log('animationend');
                            console.log(event.animationName);
                            console.log(event.originalEvent.animationName);
                        }
                    });
                }                                   
            },
            showNext        = function() {

                if( hasPerspective ) {

                    $teTransition.addClass('te-show');
                    $teCover.addClass('te-hide');                   
                }

                updateImages();

            },
            updateImages    = function() {

                var $back   = $teTransition.find('div.te-back'),
                    $front  = $teTransition.find('div.te-front');

                ( currentImg === imagesCount - 1 ) ? 
                    ( last_img = imagesCount - 1, currentImg = 0 ) : 
                    ( last_img = currentImg, ++currentImg );

                var $last_img   = $teImages.eq( last_img ),
                    $currentImg = $teImages.eq( currentImg );

                $front.empty().append('<img src="' + $last_img.attr('src') + '">');
                $back.empty().append('<img src="' + $currentImg.attr('src') + '">');

                $teCover.find('img').attr( 'src', $currentImg.attr('src') );

            };

        return { init : init };

    })();

    TransitionEffects.init();

});