21

divそのため、さまざまな効果が適用されたネイティブ要素 ( border-radius、box-shadowおよびtransform: scale()) がいくつかあります。それらをアニメーション化すると、2 つの奇妙なことが起こります。

  1. スケールをアニメーション化しようとしているわけではありませんが、アニメーションにスケールを入れないと無視されます。
  2. アニメーションにスケールを入れると Webkit が要素をぼかす

ここの例を参照してください: http://jsfiddle.net/trolleymusic/RHeCL/ - 下部のボタンが問題をトリガーします。

最初の問題は Firefox でも発生するので、アニメーションの仕様がそのようになっているためだと思います。私が望んでいたものではありませんが、大丈夫です。

2番目の問題は奇妙です。3D 変換に関係していることはわかっています。これは、(テスト目的で)円要素に対して-webkit-perspectiveまたは宣言する-webkit-transform-style: preserve-3d;と、ぼかしの問題も発生するためです。私の混乱は、z インデックスをすべて変換しようとしているわけではないということtranslateYですtranslate。

Chrome (18)、Chrome Canary (20)、Safari (5.1.2 & 5.1.4) で発生します。

それで、私は何が起こっていると思いますか？そして、どうすればぼやけを避けることができますか？

最悪のシナリオ:要素を拡大縮小する代わりに、要素に異なるサイズを使用することができますが、それは実際には問題ではありませんが、これはより洗練された解決策であると考えていたため、この問題が発生しました。

4

2 に答える 2

18

要素がぼやけている理由については、この回答を参照してください：https ://stackoverflow.com/a/4847445/814647

上記の要約： WebKitは、アニメーション化する前に元のサイズ/ CSSを取得し、それを画像として処理し、次にスケールアップしてぼやけを生成します。

解決策：初期サイズを最大のスケールにし、最初は低いスケールから始めます（したがって、この場合、サイズを5増やし、初期スケールを0.2に設定します）。

アップデート

私が理解していることから現在のスケールを無視する理由は、あなたが特に翻訳だけを設定していないからです（私は今それのためにCSSを探しています）。を実行する-webkit-animationと、現在のすべての変換（スケール）がリセットされるため、スケールがそこにあることを確認する必要があります。変更するCSSを検索しているので、位置だけが変更されます。

于 2012-05-02T16:35:15.060 に答える
0

私が見つけた最善の方法は、アニメーションが完了するのを待ってから、要素に直接変換を適用し、アニメーション クラスを削除することです。このようなものは私にとってはうまくいき、グリッチは発生しません:

$m.bindOnce($m('win-text'), 'webkitAnimationEnd', function(){ //avoid blurred problem with animating scale property in webkit
    $m('win-text').style.webkitTransform = 'scale(1.5) translateY(-60px)';
    $m.removeClass($m('win-text'), 'final');
});

私は jQuery とは別のライブラリを使用していますが、その考えはわかります。

于 2013-07-07T16:40:38.720 に答える