旋转期间Chrome 21缩放元素

Question

我认为这是最新Chrome(21.0.1180.57)中的一个错误,但我想我会在这里发帖只是为了仔细检查.

我正在使用javascript更改元素的旋转,并使用webkit过渡来为旋转设置动画.有时,根据开始和结束旋转,元素随着旋转随机缩放.我在这里做了一个演示:http://jsfiddle.net/XCwUQ/(点击正文).

有谁知道为什么会发生这种情况？

干杯,

基督教

Answer 1

更新：似乎现已在 Chrome 23 中修复。（请参阅@joequincy 对原始问题的评论）

\n\n\n\n

确实，这看起来像是一个错误。在它被修复之前，您可以使用 jQuery 来解决animate()函数，如下所示：

\n\n

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

\n\n

去除transitionCSS 语句并添加：

\n\n

border-spacing: 163px;\n

\n\n

这个例子滥用了border-spacing属性，因为它在大多数情况下不会影响您的布局。

\n\n

看http://jsfiddle.net/hongaar/wLTLK/1/

\n\n

（感谢这个答案：动画元素变换旋转）

\n\n

注意：您可以选择使用 jQuery 转换插件来删除丑陋的多次css()调用并获得更简单的语法版本animate()（但会增加开销）。看https://github.com/louisremi/jquery.transform.js

\n