css - IE 上的类删除时触发关键帧动画 (10, 11,12, 13)

Question

Reproduction online

Reproduction with vanilla Javascript

我正在使用以下方法创建 CSS 动画:

.slides.future.active {
  -webkit-animation-name: sectionIn;
  animation-name: sectionIn;
}
@keyframes sectionIn {
  ....
}{

.animated {
    transition: all 800ms ease;
    -moz-transition: all 800ms ease;

    -webkit-animation-duration: 800ms;
    animation-duration: 800ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

    -webkit-animation-timing-function: ease;
    timing-function: ease;
}
.slides.future{
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0 );
}

具有以下 HTML:

<div id="demo2" class="slides animated future active">
   Demo
</div>
<div class="slides animated future">Demo 2</div>

现在，当我从元素中删除类 future 时，动画会再次触​​发。

这只发生在 IE 中。 (10, 11, 12, 13) 在 Firefox、Chrome、Safari 中运行良好...

Reproduction online

Reproduction with vanilla Javascript

Answer 1

奇怪的是(对于 IE 来说不是很奇怪)，您还需要告诉浏览器当 .slides 和 .active 存在但不存在 .future 时要做什么。如果你不这样做，那么它会在那一瞬间回到原来的位置，直到它收到再次恢复的指令。所以你需要添加:

.slides.active:not(.future){
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0 );
}

注意:仅在 IE 11 中测试。

<强> Fiddle