14

I think this is a bug in the latest Chrome (21.0.1180.57), but I thought I'd post here just to double check.

I'm changing the rotation of an element using javascript, and using webkit transitions to animate the rotation. Sometimes, depending on the start and end rotation, the element randomly scales along with the rotation. I've made a demo here: http://jsfiddle.net/XCwUQ/ (click the body).

Does anyone know why this might be happening?

Cheers,

Christian

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)');    
            }
        });        
    });
});​

删除transitionCSS 语句并添加：

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 回答