jquery - 多个关键帧动画破坏了 Internet Explorer 11 中的自定义 slider

Question

编辑:已添加 JSFiddle here

我们使用 jQuery 和 CSS3 关键帧动画制作了自定义图像 slider 。此图像 slider 在除 IE11 之外的所有浏览器中都能完美运行。我们认为这与同步动画有关。

基本上，如果您正在通过 slider 导航。它将在上一张幻灯片中添加和删除一个类，并向当前幻灯片添加一个新类。您将根据方向。添加后，两个 child-div 将从屏幕底部和顶部开始动画。

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

现场版:

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....