多个关键帧动画会破坏Internet Explorer 11中的自定义滑块

时间：2015-06-26 11:09:07

标签： jquery css3 slider css-animations internet-explorer-11

编辑： 添加了JSFiddle here

我们使用jQuery和CSS3关键帧动画创建了一个自定义图像滑块。此图像滑块适用于除IE11以外的所有浏览器。我们认为它与同步动画有关。

基本上，如果您在滑块中导航。它将添加和删除上一张幻灯片中的一个类，并将一个新类添加到当前幻灯片中。您将根据指示添加以下类： .slide-display-top 或 .slide-display-bottom 。添加后，两个child-divs将从屏幕的底部和顶部开始制作动画。

当您来回导航时，它确实有效。

直播版：

http://creativeforce.nl

我们真的被困在这一个。

css的一部分：

body main .slider .slide-display-top {
        visibility: visible;
    }
    body main .slider .slide-display-top>div {
        height: 100%}
    body main .slider .slide-display-top>div:first-child {
        -webkit-animation: moveFromBottomFade 700ms ease-in-out;
        -moz-animation: moveFromBottomFade 700ms ease-in-out;
        -o-animation: moveFromBottomFade 700ms ease-in-out;
        -ms-animation: moveFromBottomFade 700ms ease-in-out;
        animation: moveFromBottomFade 700ms ease-in-out;
    }
    body main .slider .slide-display-top>div:last-child {
        -webkit-animation: moveFromTopFade 700ms ease-in-out;
        -moz-animation: moveFromTopFade 700ms ease-in-out;
        -o-animation: moveFromTopFade 700ms ease-in-out;
        -ms-animation: moveFromTopFade 700ms ease-in-out;
        animation: moveFromTopFade 700ms ease-in-out;
    }
    body main .slider .slide-display-bottom {
        visibility: visible;
    }
    body main .slider .slide-display-bottom>div {
        height: 100%}
    body main .slider .slide-display-bottom>div:first-child {
        -webkit-animation: moveFromTopFade 700ms ease-in-out;
        -moz-animation: moveFromTopFade 700ms ease-in-out;
        -o-animation: moveFromTopFade 700ms ease-in-out;
        -ms-animation: moveFromTopFade 700ms ease-in-out;
        animation: moveFromTopFade 700ms ease-in-out;
    }
    body main .slider .slide-display-bottom>div:last-child {
        -webkit-animation: moveFromBottomFade 700ms ease-in-out;
        -moz-animation: moveFromBottomFade 700ms ease-in-out;
        -o-animation: moveFromBottomFade 700ms ease-in-out;
        -ms-animation: moveFromBottomFade 700ms ease-in-out;
        animation: moveFromBottomFade 700ms ease-in-out;
    }

关键帧：

@-webkit-keyframes moveFromTopFade {
    0% {
        -webkit-transform: translate(0, -100%);
        -moz-transform: translate(0, -100%);
        -o-transform: translate(0, -100%);
        -ms-transform: translate(0, -100%);
        transform: translate(0, -100%)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@-moz-keyframes moveFromTopFade {
    0% {
        -webkit-transform: translate(0, -100%);
        -moz-transform: translate(0, -100%);
        -o-transform: translate(0, -100%);
        -ms-transform: translate(0, -100%);
        transform: translate(0, -100%)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@-ms-keyframes moveFromTopFade {
    0% {
        -webkit-transform: translate(0, -100%);
        -moz-transform: translate(0, -100%);
        -o-transform: translate(0, -100%);
        -ms-transform: translate(0, -100%);
        transform: translate(0, -100%)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@-o-keyframes moveFromTopFade {
    0% {
        -webkit-transform: translate(0, -100%);
        -moz-transform: translate(0, -100%);
        -o-transform: translate(0, -100%);
        -ms-transform: translate(0, -100%);
        transform: translate(0, -100%)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@keyframes moveFromTopFade {
    0% {
        -webkit-transform: translate(0, -100%);
        -moz-transform: translate(0, -100%);
        -o-transform: translate(0, -100%);
        -ms-transform: translate(0, -100%);
        transform: translate(0, -100%)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@-webkit-keyframes moveFromBottomFade {
    0% {
        -webkit-transform: translate(0, 100%);
        -moz-transform: translate(0, 100%);
        -o-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
        transform: translate(0, 100%)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@-moz-keyframes moveFromBottomFade {
    0% {
        -webkit-transform: translate(0, 100%);
        -moz-transform: translate(0, 100%);
        -o-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
        transform: translate(0, 100%)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@-ms-keyframes moveFromBottomFade {
    0% {
        -webkit-transform: translate(0, 100%);
        -moz-transform: translate(0, 100%);
        -o-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
        transform: translate(0, 100%)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@-o-keyframes moveFromBottomFade {
    0% {
        -webkit-transform: translate(0, 100%);
        -moz-transform: translate(0, 100%);
        -o-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
        transform: translate(0, 100%)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}
@keyframes moveFromBottomFade {
    0% {
        -webkit-transform: translate(0, 100%);
        -moz-transform: translate(0, 100%);
        -o-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
        transform: translate(0, 100%)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

1 个答案:

答案 0 :(得分：0)

我们找到了解决方法。出于某种原因，在同时动画两个div时，translate（）不起作用。而不是：

@keyframes moveFromBottomFade {
    0% {
        -webkit-transform: translate(0, 100%);
        -moz-transform: translate(0, 100%);
        -o-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
        transform: translate(0, 100%)
    }
    100% {
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

我们使用了这个：

@keyframes moveFromBottomFade {
    0% {
         position:absolute;
         bottom:-100%;
    }
    100% {
         position:absolute;
         bottom:0%;
    }
}

现在一切顺利。谢谢你的网络浏览器....

相关问题
最新问题