2

重複の可能性:
Safari: 絶対配置の DIV が DOM 経由で更新されたときに移動しない

別の質問に対するこの回答では、jQuery を使用して要素の回転をアニメーション化できる小さなハックについて説明しています。

私の状況では、要素の回転を top: および left: プロパティと同時にアニメーション化したいと考えていました。だから私はこのフィドルを思いつきました。

function transformThing() {
    $('#thing').animate({ top: '+=50', left: '+=50', borderSpacing: -90 }, {
        step: function(now,fx) {
            if(fx.prop === 'borderSpacing') {
                $(this).css('-webkit-transform','rotate('+now+'deg)');
                $(this).css('-moz-transform','rotate('+now+'deg)'); 
                $(this).css('transform','rotate('+now+'deg)'); 
            }
        },
        duration: 1000
    }, 'swing');
}
$(document).ready(function() {
    $('#thing').click(function () {
        transformThing();
    });
});

正方形をクリックすると回転し、右下に移動します。これは、Safariを除いて、それが行うことです。Mac OS X 10.7.3 で Safari 5.1.5 を実行していますが、回転だけがアニメーション化されます。

同僚が、よりクリーンな構文で同じことを実行できるこの jQuery プラグインを見つけましたが、同じ問題が発生します。

Web Inspector を見ると、top: と left: の値が変化していることがわかります。実際、これらは正しい値に変化しています。ただし、オフにして再度オンにしない限り、要素の視覚的なレイアウトには影響しません。

明らかに、答えは「ええと、それは Safari のバグです」です。しかし、回避策を見つけるのに役立つ可能性のあるより深い説明や、他に試すことができるものはありますか?

4

1 に答える 1

1

簡単な答えは、サファリでは機能しないということです。しかし、良いニュースは、次の例のようにキャンバスを使用すると正常に機能することです。http: //beta.rallyinteractive.com/作業アニメーションは、スプライトを回転/変換/アニメーション化します。それは本当に私があなたに与える誰かを見ることができる唯一のタイプの答えです。

于 2012-04-15T16:32:27.817 に答える