14

これは最新のChrome(21.0.1180.57)のバグだと思いますが、もう一度確認するためにここに投稿すると思いました。

javascriptを使用して要素の回転を変更し、Webkitトランジションを使用して回転をアニメーション化します。場合によっては、開始回転と終了回転に応じて、要素は回転に合わせてランダ​​ムにスケーリングされます。ここでデモを作成しました:http://jsfiddle.net/XCwUQ/(本文をクリックします)。

なぜこれが起こっているのか誰かが知っていますか?

乾杯、

キリスト教徒

4

1 に答える 1

1

更新:Chrome 23で修正されたようです(元の質問の@joequincyコメントを参照してください)


確かに、これはバグのようです。animate()修正されるまで、次のようにjQuery関数を回避できます。

$(function() {
    var rotation = 163;
    $('body').on('click', function() {
        rotation = (rotation == 163) ? 198 : 163;               
        $('#wheel').animate({
            borderSpacing: rotation
        }, {
            step: function(now, fx) {
                $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');    
                $(this).css('-moz-transform', 'rotate(' + now + 'deg)');    
                $(this).css('-ms-transform', 'rotate(' + now + 'deg)');    
                $(this).css('-o-transform', 'rotate(' + now + 'deg)');    
                $(this).css('transform', 'rotate(' + now + 'deg)');    
            }
        });        
    });
});​

CSSステートメントを削除し、transition以下を追加します。

border-spacing: 163px;

border-spacingこの例では、ほとんどの場合レイアウトに影響を与えないため、属性を誤用しています。

http://jsfiddle.net/hongaar/wLTLK/1/を参照してください

(この回答のおかげで:アニメーション要素変換回転

:オプションで、jQuery変換プラグインを使用して、醜い複数のcss()呼び出しを削除し、構文をより単純なバージョンにすることができanimate()ます(ただし、オーバーヘッドが追加されます)。https://github.com/louisremi/jquery.transform.jsを参照してください

于 2012-11-05T14:11:14.857 に答える