当我点击场景时,框就会掉下来.当我再次点击时,框会站起来.动画很流畅,但是当我在不同位置点击很多次时,有时动画会跳过帧.
我在谷歌Chrome中的OS X上有这个错误.在Opera中测试 – 一切正常,没有错误.
http://jsfiddle.net/nw78myhn/1/
有人知道如何解决这个问题吗？
<div class="scene"> <div class="Box"></div> </div>
.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);
}
$('.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错误.
为了使您的第二个示例适合您的需求,您可以添加一个愚蠢的过渡
$('.scene').on('click',function() {
$('.Box').toggleClass('Box-transform');
});
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="scene"> <div class="Box"></div> </div>
