Question

我有一个html页面，其中包含一个div，当使用底部属性上的css过渡单击按钮时，该div正在移动。（底部值的变化由jQuery完成）这在所有浏览器（包括iPad上的iOS）上都能正常工作。现在我正在开发第二页，必须做同样的事情。我复制了所有的CSS属性和jQuery函数，但是当div移入时，iOS上总是有一个不稳定的动画（仅在iOS上!!）。

我已经尝试了类似的解决方案：

-webkit-transform: translate3d(0, 0, 0);

或

-webkit-transform: translateZ(0);

没有什么能使动画像我在其他页面中那样流畅（我认为）完全拥有相同的代码。

现在我不知道为什么会有差异以及如何解决这个问题。有没有人有类似的麻烦，可以给我一些有用的建议吗？

完整代码CSS：

.animationTestObject {
   width: 100px;
   height: 100px;
   background-color: black;
   position: fixed;
   left: 100px;
   bottom: -100px;
   transition: bottom 500ms;
   -webkit-transition: bottom 500ms;
   transform: translate3d(0, 0, 0);
   -webkit-transform: translate3d(0, 0, 0);
}

JS：

function startAnimation() {
   $(".animationTestObject").css('bottom', '100px');
}

Answer 1

要在制作动画时获得更好的效果，请尝试避免css properties that trigger a relayout（标有紫色标记的那些）。

在您的情况下，您应该为transform：translate属性设置动画，如下所示：

.animationTestObject {
    width: 100px;
    height: 100px;
    position: fixed;
    left: 100px;
    bottom: -100px;
    transition: transform 500ms ease;
    transform: translate3d(0, 0, 0);
}

function startAnimation() {
    $('.animationTestObject').css('transform', 'translate(0, -100px)');
}

使用css动画的iO的性能问题

1 个答案: