当我点击场景时,框就会掉下来.当我再次点击时,框会站起来.动画很流畅,但是当我在不同位置点击很多次时,有时动画会跳过帧.
我在谷歌Chrome中的OS X上有这个错误.在Opera中测试 – 一切正常,没有错误.
http://jsfiddle.net/nw78myhn/1/
有人知道如何解决这个问题吗？
@H_403_10@<div class="scene"> <div class="Box"></div> </div> @H_403_10@.scene { width: 500px; height: 500px; position: absolute; background: #efefef; } .Box { position: absolute; left: 250px; top: 100px; width: 70px; height: 140px; background: #000; transform: rotate(0deg); transform-origin: bottom left; transition: transform 600ms linear; } .Box-transform { transform: rotate(-96deg); } @H_403_10@$('.scene').on('click',function() { $('.Box').toggleClass('Box-transform'); });更新：
我注意到如果transform-origin设置为.Box-transform而不是.Box,则不会跳帧.
http://jsfiddle.net/nw78myhn/2/
但在这种情况下,原点在左下角不是视觉上的.我真的不明白为什么.
更新2 [2016年2月16日]：
此错误已在较新版本的Google Chrome中修复.无法在Chrome 48.0.2564.109中重现
解决方法
似乎是与转换单个属性相关的Chrome错误.
为了使您的第二个示例适合您的需求,您可以添加一个愚蠢的过渡
@H_403_10@$('.scene').on('click',function() { $('.Box').toggleClass('Box-transform'); }); @H_403_10@.scene { width: 500px; height: 500px; position: absolute; background: #efefef; } .Box { position: absolute; left: 250px; top: 100px; width: 70px; height: 140px; background: #000; transform: rotate(0deg); transform-origin: bottom left; perspective: 1000px; transition-property: transform perspective; transition-duration: 600ms; transition-timing-function: linear; transition-delay: initial; } .Box-transform { transform: rotate(-90deg); perspective: 1001px; } @H_403_10@<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="scene"> <div class="Box"></div> </div>