Question

我最初使用jQuery的幻灯片功能在我正在制作的Cordova应用程序中将页面滑出视图（以显示其下方的另一个页面），虽然这在我的桌面浏览器上运行良好，但它（现在可以理解）是在实际的移动设备上相当不稳定。所以我找到了原因，并了解到我应该为移动设备使用CSS3动画/过渡，更具体地说，可以使用Translate3d来处理可能需要GPU渲染的任何内容。所以我做了这样的改变：

#mainpage{
    z-index: 10;
    top: 0;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
    border-bottom: 1px solid #111111;
}
#mainpage.out{
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
}

我只是根据需要切换'out'类。

转换顺利进行，直到屏幕上剩下大约50px（或者页面剩下大约50px重新出现），然后在完成之前停止大约一秒钟。我想知道是否有人建议为什么会出现这种情况，或者是否有更有效的方法可以做到这一点。

我使用的设备有一个带12核高性能显卡的nVIDIA Tegra 3 CPU。

Answer 1

我认为这不是你应该做动画的方式。

尝试以下方法：

#mainpage {
   z-index: 10;
   top: 0;
   border-bottom: 1px solid #111111;
   -webkit-transition: -webkit-transform .5s linear;
   transition: transform .5s linear;
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
}

#mainpage.out {
   -webkit-transform: translate3d(0,-100%,0);
   transform: translate3d(0,-100%,0);
}

首先更改是，指定要设置动画的属性的类型（transition参数），在编写all时不确定要动画的是什么。

第二件事，用translate3d(0,0,0)指定“后退”转换。但也不确定，如果它在这里有所作为。我希望这会对你有所帮助。

在移动设备上转换结束时翻译三维波动

1 个答案: