Question

我试图在js中的某个事件之后显示无限旋转的图像在Chrome 26，Firefox 19中完美运行，但在Opera 12（最新版）中失败。

我使用style =“display：none”的初始图像，如下所示：

<img src="http://example.com/img.png" id="test" style="display: none">

然后我显示图像（删除显示：无）：

$('#test').show();

预期行为：见旋转图像。在Opera中不会发生旋转。这是Opera的错误吗？我知道我可以通过在显示图像后将其应用于类来开始动画，但我想弄清楚当图像最初设置动画时如何触发它。当显示初始图像时，动画工作正常（显示：块）。

这是jsFiddle示例：http://jsfiddle.net/vdJLL/

我用于轮换的CSS：

#test {
  -webkit-animation: rotate 5s linear 0s infinite normal;
  -moz-animation: rotate 5s linear 0s infinite normal;
  -o-animation: rotate 5s linear 0s infinite normal;
  -ms-animation: rotate 5s linear 0s infinite normal;
  animation: rotate 5s linear 0s infinite normal;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to { 
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes rotate {
  from {
    -o-transform: rotate(0deg);
  }
  to { 
    -o-transform: rotate(360deg);
  }
}

@-ms-keyframes rotate {
  from {
    -ms-transform: rotate(0deg);
  }
  to { 
    -ms-transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to { 
    transform: rotate(360deg);
  }
}

Answer 1

我刚刚遇到了类似的问题 - 我一直在尝试js显示：没有其他div（甚至没有影响动画）并且让Opera动画冻结了（哪个更有趣，可以通过输入蜻蜓并重新启用动画部分风格来解冻 - 所以听起来确实像是一个Opera bug。

无论如何，我刚刚学会了一种解决方法 - 而不是display:none，它可以与

一起使用

visibility:hidden; height: 0px;

另请参阅您的jsfiddle已更新http://jsfiddle.net/vdJLL/3/

如果元素最初具有display：none，则CSS中的CSS3动画不会启动

1 个答案: