Question

我正在尝试使用translade3d制作滑块并缩放动画。

我正在为包含供应商前缀的animationend事件添加一个事件监听器，以使幻灯片显示和消失。

它适用于Chrome，Safari和Opera，但在Firefox中却失败了。当第一张幻灯片触发animationend时，它似乎触发了所有幻灯片的事件。

这是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);
    }
}

任何想法为什么Firefox不会以同样的方式处理它？

Answer 1

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

这是调整后的回调：

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";   
}

Javascript animationend事件监听器在Firefox上的表现不同

1 个答案: