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 に答える