jquery - 动画在 IE11 上无法正常工作

Question

我有一个动画可以在除 IE11 以外的其他浏览器上正常工作。

$(document).ready(function() {
  $('.activate').click(function() {
    $('.eight-box').toggleClass('animate')
  });
}());

.activate {
  background: black;
  color: red;
  border: 2px solid red;
  font-size: 16px;
  position: absolute;
  left: 10px;
  text-align: center;
}

.eight-box {
  position: relative;
  display: block;
  margin: 1em auto;
  width: 16em;
  height: 16em;
  font-family: sans-serif;
  font-size: 20px;
  border: 1px solid;
  border-radius: 50%;
}

.fig-8 {
  display: block;
  position: absolute;
  color: red;
  background: black;
  width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  font-smoothing: antialiased;
  transition: all .2s linear;
  overflow: hidden;
  z-index: 5;
  border: 2px solid red;
}

.rotate1,
.rotate2,
.rotate3,
.rotate4 {
  position: absolute;
  top: 50%;
  left: 0;
  height: 70px;
  margin-top: -35px;
  width: 100%;
  z-index: 1;
}

.rotate1 .pos-4,
.rotate2 .pos-4,
.rotate3 .pos-4,
.rotate4 .pos-4 {
  top: 0;
  left: -35px;
  position: relative;
  transform: rotate(-19deg);
  z-index: 2;
  border-radius: 50%;
}

.rotate1,
.rotate2,
.rotate3,
.rotate4 {
  transform: rotate(19deg);
}

.animate .rotate4 {
  animation: circularAnimation-a 1s 1s 1 forwards;
}

.animate .rotate4 .pos-4 {
  animation: positioning-a 1s 1s 1 both, pulse 1s 3s 1 alternate forwards;
}

.animate .rotate3 {
  animation: circularAnimation-b 1s 1s 1 forwards;
}

.animate .rotate3 .pos-4 {
  transform: rotate(-220deg);
  animation: pulse 1s 3s 1 alternate forwards;
}

.animate .rotate2 {
  animation: circularAnimation-c 1s 1s 1 forwards;
}

.animate .rotate2 .pos-4 {
  transform: rotate(50deg);
  animation: pulse 1s 3s 1 alternate forwards;
}

.animate .rotate1 .pos-4 {
  animation: pulse 1s 3s 1 alternate forwards;
}

@keyframes positioning-a {
  0% {
    transform: rotate(-19deg);
  }
  100% {
    transform: rotate(190deg);
  }
}

@keyframes circularAnimation-a {
  0% {
    transform: rotate(19deg);
  }
  100% {
    transform: rotate(-190deg);
  }
}

@keyframes circularAnimation-b {
  0% {
    transform: rotate(19deg);
  }
  100% {
    transform: rotate(-140deg);
  }
}

@keyframes circularAnimation-c {
  0% {
    transform: rotate(19deg);
  }
  100% {
    transform: rotate(-50deg);
  }
}

@keyframes positioning-b {
  0% {
    transform: rotate(23deg);
  }
  100% {
    transform: rotate(135deg);
  }
}

@keyframes circularAnimation-d {
  0% {
    transform: rotate(23deg);
  }
  100% {
    transform: rotate(-135deg);
  }
}

@keyframes circularAnimation-e {
  0% {
    transform: rotate(23deg);
  }
  100% {
    transform: rotate(-80deg);
  }
}

@keyframes circularAnimation-f {
  0% {
    transform: rotate(23deg);
  }
  100% {
    transform: rotate(-20deg);
  }
}

@keyframes positioning-c {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(150deg);
  }
}

@keyframes circularAnimation-g {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(-150deg);
  }
}

@keyframes circularAnimation-h {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(-55deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="activate">Animate</button>
<div class="eight-box">
  <div class="rotate1">
    <div class="fig-8 col-1 pos-4">1</div>
  </div>
  <div class="rotate2">
    <div class="fig-8 col-2 pos-4">2</div>
  </div>
  <div class="rotate3">
    <div class="fig-8 col-3 pos-4">3</div>
  </div>
  <div class="rotate4">
    <div class="fig-8 col-4 pos-4">4</div>
  </div>
</div>

这是我在元素中使用的 SCSS:https://codepen.io/maketroli/pen/NgBZZL

动画在 Chrome 和 Firefox 上效果很好，但 IE11 有一些小故障，您在第二次尝试切换类 .animate 时可能会看到这些小故障。

有什么建议吗？

Answer 1

检查 $(document).ready() 是否在 IE11 上工作。我认为这不是真的有效。可以登录查看

$(document).ready(function() {
    console.log("loaded");
})