1

我最初在我正在制作的 Cordova 应用程序中使用 jQuery 的滑动功能将页面滑出视图（以显示其下方的另一个页面），虽然这在我的桌面浏览器上运行良好，但它（现在可以理解）非常不稳定实际的移动设备。所以我找到了原因，并了解到我应该为移动设备使用 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”类。

过渡平稳运行，直到屏幕上留下大约 50 像素（或页面有大约 50 像素重新出现），然后在完成之前停止大约一秒钟。我想知道是否有人对为什么会出现这种情况有任何建议，或者是否有更有效的方法来做到这一点。

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

4

1 回答 1

0

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

尝试以下操作：

#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). 也不确定，如果它在这里有所作为，虽然。我希望这可以帮助你。

于 2014-09-10T06:12:54.233 回答