Question

我在IE11中的css3动画中遇到了一个问题。

这是与问题的链接（请在ie11中打开）

$(document).ready(function() {
  $(".spinnerTinyBar").show();
  $("#toggle").click(function() {
    $(".spinnerTinyBar").toggle();
  });
});

@keyframes tinybar-load1 {
  0% {
    box-shadow: 0 0 blue;
    height: 20px;
  }
  40% {
    box-shadow: 0 -15px blue;
    height: 25px;
  }
  80% {
    box-shadow: 0 0 blue;
    height: 20px;
  }
  100% {
    box-shadow: 0 0 blue;
    height: 20px;
  }
}

.spinnerTinyBar,
.spinnerTinyBar:before,
.spinnerTinyBar:after {
  background: blue;
  animation: tinybar-load1 1s infinite ease-in-out;
  width: 2px;
  height: 20px;
}

.spinnerTinyBar:before {
  left: -5px;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinnerTinyBar {
  font-size: 9px;
  position: relative;
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
  transform: translateZ(0);
}

.spinnerTinyBar:after {
  left: 5px;
}

.spinnerTinyBar:before,
.spinnerTinyBar:after {
  position: absolute;
  top: 0;
  content: "";
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="toggle" value="Toggle" />
<div class="spinnerTinyBar"></div>

JSFiddle

问题：第一次，动画效果很好。当我通过单击切换按钮切换时，第一个和最后一个条形图不会发生动画。这在chrome和所有移动设备上都运行良好。

让我知道是否有人想出来并做了必要的

Answer 1

这是一个奇怪的问题，但这里有一个解决方法：

将您的HTML更改为：

<body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
            $(".spinnerTinyBar").show();
            $("#toggle").click(function(){
            $(".divClass").toggleClass('spinnerTinyBar');

            });
            });

        </script>
        <input type="button" id="toggle" value="Toggle"/>
        <div class="divClass spinnerTinyBar"></div>
    </body>

我们只需更改其上的类以显示动画，而不是隐藏元素，而不是

Here's an updated fiddle working in ie11

Answer 2

为你的IE试试这个小黑客

@media screen and (min-width: 0\0) {
  .your-animation-parent {
    transform: translate3d(0, 0, 0);
   }
}

IE11中的CSS3动画问题

2 个答案: