动画旋转器在IE隐藏/显示后以相同的速度旋转
Animated spinner spins at same speed in IE after hiding/showing
我有一个css动画微调器。它使用动画来旋转。元素上有一个边界,its:before和its:after。每个边界以不同的速度旋转。它在第一页加载时工作得很好,但在IE中,如果它被隐藏然后再次显示,它都以相同的速度旋转。
下面的例子演示了这个问题:这是我的css:
.loader-wrapper {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.loader-wrapper .loader {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #2372b9;
-webkit-animation: spin 2s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */
}
.loader-wrapper .loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f47b27;
-webkit-animation: spin 3s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */
}
.loader-wrapper .loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #6ba543;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0);
/* IE 9 */
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
/* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg);
/* IE 9 */
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
/* Firefox 16+, IE 10+, Opera */
}
}
@-moz-keyframes spin {
0% {
-webkit-transform: rotate(0);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0);
/* IE 9 */
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
/* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg);
/* IE 9 */
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
/* Firefox 16+, IE 10+, Opera */
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0);
/* IE 9 */
-moz-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
/* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg);
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg);
/* IE 9 */
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
/* Firefox 16+, IE 10+, Opera */
}
}
我的html:
<div class="loader-wrapper">
<div class="loader"></div>
</div>
<a href="javascript:void(0);">Hide/show</a>
和我的javascript:
$("a").on("click", function() {
if($(".loader").is(":visible")) {
$(".loader").hide();
}
else {
$(".loader").show();
}
});
我不知道为什么会发生这种情况——你可能只是在IE对display属性的解释中发现了一个bug,或者它如何处理伪元素。你最好的办法可能是尝试另一种方法。使用overflow: hidden
切换隐藏类
.hide {
height: 0;
overflow: hidden;
}
相关文章:
- 知道为什么我的旋转木马不会自动更改图片吗
- Wacom stu-430签名捕获速度太慢
- 顺时针旋转Svg元件
- 将鼠标旋转限制为特定的度数
- 如何在速度模板中获取LiferayPortlet实例id
- 旋转后拖动对象
- 画布使用RequestAnimationFrame以一定的速度旋转圆
- jscript 垃圾收集器的速度有多快?三.js矩阵旋转
- 如何根据时间降低 qml 中的旋转速度
- 我需要减慢 Javascript 中的轮盘旋转速度
- 为什么当我在相同位置使用webgl创建新球体时,旋转速度会增加
- 我如何改变滑块的速度使用箭头在光滑旋转木马
- 改变在IE 11中不工作的DIV的旋转速度,使用JS来更新CSS动画属性
- 如何使用数据.GUI来控制一个模型的旋转速度
- 在Javascript中以正常速度左右旋转图像(raphael)
- 放慢旋转/交替文本的速度
- java脚本360图像旋转代码减慢了旋转速度
- 如何减缓移动引导旋转木马滑动滚动的滚动速度
- 旋转动画的速度,方向和if语句
- 动画旋转器在IE隐藏/显示后以相同的速度旋转