IE11 中的 CSS3 動畫問題
[英]CSS3 animation issue in IE11
問題描述
我僅在 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>
問題：第一次，動畫運行良好。 當我通過單擊切換按鈕進行切換時，第一個和最后一個欄不會發生動畫。 這在 chrome 和所有移動設備中都可以正常工作。
讓我知道是否有人想出來並做必要的事情
2 個解決方案
解決方案1
1 已采納 2015-11-18 10:52:56
這是一個奇怪的，但這里有一個修復：
將您的 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>
我們不是隱藏元素，而是簡單地更改其上的類以顯示動畫，或者不顯示
解決方案2
0 2018-04-13 11:26:33
為您的 IE 嘗試這個小技巧
@media screen and (min-width: 0\0) {
.your-animation-parent {
transform: translate3d(0, 0, 0);
}
}
Css3動畫在IE11中不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.