IE上的类删除会触发关键帧动画（10、11、12、13）

debugcn 发表于 Dev

阿尔瓦罗

我正在使用以下方法创建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中运行良好...

在线复制

用原始Javascript复制

皮莫尔

一个可能的解决方案是更改CSS选择器。

而不是.animated使用.future.animated动画并将其应用于该选择器。

.future.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;
}

这样，只有两个类的元素都可以动画。因此，future从元素中删除类可防止其再次进行动画处理。

https://jsfiddle.net/jsms8p1k/17/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。