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

Question

编辑： 已添加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)
    }
}

Answer 1

我们找到了解决方法。出于某种原因，当同时为两个 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%;
    }
}

现在一切都很顺利。谢谢 Internet Explorer....