jquery - 在 Safari 和 Chrome 中摇动 css 转换

Question

我正在做一个过渡，结合宽度过渡和旋转过渡。 http://innouveau.nl/loodsboot-wp/test/index2.html

问题是，在 Safari 和 Chrome 中，转换非常不稳定。

如您所见，在过渡过程中出现了滚动条，我想这与它有关。当我将父级设置为溢出:隐藏时，滚动条不可见，但抖动仍然存在: http://www.innouveau.nl/loodsboot-wp/test/index1.html

当过渡只在旋转时，没有抖动:请参阅“index3.html”(抱歉，还不允许发布 3 个链接)

我正在使用 jquery.transit 库，但使用普通的 css 方式也存在抖动。

Answer 1

我看到您将宽度设为原来的两倍。我的解决方案是按比例制作动画:

起始位置:

 $(.draggable).css({'-webkit-transform': 'rotate(0deg) scale(1) translate(0,0)'});

结束位置:

$(.draggable).css({'-webkit-transform': 'rotate(-90deg) scale(2) translate(0,-200px)'});

这是一个 test demo

如果成功了请告诉我:)