当我点击场景时,盒子掉了下来。当我再次点击时,盒子站起来了。动画很流畅,但是当我在不同位置多次点击时,有时动画会跳帧。
我在 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>
关于css transform + css transition = 跳帧 [Google Chrome],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32161553/