Javascript animationend Event Listener 在 Firefox 上的行为不同

Javascript animationend event listener acting differently on Firefox

本文关键字：Firefox animationend Event Listener Javascript 更新时间：2023-09-26

我正在尝试制作带有translade3d和缩放动画的滑块。

我正在向带有供应商前缀的 animationend 事件添加一个事件侦听器，以使幻灯片出现和消失。

它在Chrome，Safari和Opera上运行良好，但在Firefox中失败。当第一张幻灯片触发动画结束时，它似乎触发了所有幻灯片的事件。

这是Javascript：

function slideCallBack(selector,i,list){
            var slide = this;
            slide.selector = selector;
            slide.nextSlide = list[i+1];
            if ( i === list.length-1 ) {
                slide.nextSlide = list[0];
            }
            slide.selector.style.display = "none";
            if ( typeof(slide.nextSlide) !== 'undefined' ) {
            slide.nextSlide.style.display = "block";
            slide.nextSlide.className = slide.nextSlide.className + " slide-effect-left";   
            }
    }

    function setUpSlider(classname){
        this.elementList = document.getElementsByClassName(classname);
        var sliderConfig = this;

            for (var i=0;i<sliderConfig.elementList.length;++i) {
            PrefixedEvent(sliderConfig.elementList[i], "AnimationEnd", i, sliderConfig.elementList);
            }   
        sliderConfig.elementList[0].style.display = "block";        
    }
    var pfx = ["webkit", "MS", "o", "", "moz"];
    function PrefixedEvent(element, type, iterator, list) {
                for (var p = 0; p < pfx.length; p++) {
                    if (!pfx[p]) type = type.toLowerCase();
                    element.addEventListener(pfx[p]+type, function() { slideCallBack(element,iterator,list) }, false);
                }
    }
setUpSlider('slide');

以下是关键帧：

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translate3d(0px, 60px, 0px) scale(2,2);
        transform: translate3d(0, 60px, 0px) scale(2,2);
    }
    15% {
        -webkit-transform: translate3d(30%, 30px, 0px) scale(1,1);
        transform: translate3d(30%, 30px, 0px) scale(1,1);
    }
    80% {
        -webkit-transform: translate3d(70%, 30px, 0px) scale(1,1);
        transform: translate3d(70%, 30px, 0px) scale(1,1);
        }
    100% {
        -webkit-transform: translate3d(150%, -200%, 500px) scale(2,2);
        transform:translate3d(150%, -200%, 500px) scale(2,2);
        }
}

@keyframes slideLeft {
   0% {
        -webkit-transform: translate3d(0px, 60px, 0px) scale(2,2);
        transform: translate3d(0, 60px, 0px) scale(2,2);
    }
    15% {
        -webkit-transform: translate3d(30%, 30px, 0px) scale(1,1);
        transform: translate3d(30%, 30px, 0px) scale(1,1);
    }
    80% {
        -webkit-transform: translate3d(70%, 30px, 0px) scale(1,1);
        transform: translate3d(70%, 30px, 0px) scale(1,1);
    }
    100% {
        -webkit-transform: translate3d(150%, -200%, 500px) scale(2,2);
        transform:translate3d(150%, -200%, 500px) scale(2,2);
    }
}

知道为什么火狐不以同样的方式处理它吗？

让它工作，将关键帧放置在特定的类中，并在触发 animationend 时从当前幻灯片中删除该类，并将该类添加到下一张幻灯片。在所有 mordern 浏览器上都像一个魅力一样工作。

以下是调整后的回调：

function slideCallBack(selector,i,list){
        var slide = this;
        slide.selector = selector;
        slide.nextSlide = list[i+1];
        if ( i === list.length-1 ) {
            slide.nextSlide = list[0];
        }
        slide.selector.className = 'cold-md-4 slide';
        slide.selector.style.display = "none";
        slide.nextSlide.style.display = "block";
        slide.nextSlide.className = slide.nextSlide.className + " slide-effect-left";   
}