动画在IE11上无法正常工作

Question

我有一个动画在其他浏览器上正常工作，但IE11。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以下是我在项目中使用的SCSS：https://codepen.io/maketroli/pen/NgBZZL

动画在Chrome和Firefox上运行得非常棒，但IE11有一些故障，这些故障与你在第二次尝试时切换类.animate时看起来相同。

有什么建议吗？

Answer 1

检查$(document).ready(function() { console.log("loaded"); }) 是否正在使用IE11。 我认为它并没有真正起作用。你可以通过登录来检查它

Set file1 = fso.CreateTextFile(Server.MapPath( "/cs/batch/123456dirs.bat" ), true)