0

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 では回転は発生しません。これはオペラのバグですか？画像が表示された後にクラスで適用することでアニメーションを開始できることはわかっていますが、最初に画像にアニメーションが設定されているときにアニメーションをトリガーする方法を知りたいです。初期画像が表示されている場合、アニメーションは正常に動作します (表示: ブロック)。

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

1 に答える 1

1

私はちょうど同様の問題に遭遇しました - 私は js display:none other div (アニメーションにさえ影響を与えていませんでした) を試みていましたが、Opera のアニメーションがフリーズしました (これはさらに面白いことに、トンボに入り、スタイルのアニメーション部分を再度有効にします) - それは確かに Opera のバグのように聞こえます。

とにかく、私は回避策を学びました-代わりにdisplay:none、それはで動作します

visibility:hidden; height: 0px;

更新されたjsfiddleも参照してくださいhttp://jsfiddle.net/vdJLL/3/

于 2013-11-25T02:23:29.390 に答える