2

我已经构建了一个 Web 应用程序,它使用 CSS @media 查询缩小到适合移动设备的版本。

我想要一个按钮来在显示 DIV 的两个主要内容之间切换。

当页面加载时,使用@media 查询,另一个通过隐藏display: none;

单击按钮时,我希望它显示并隐藏可见的按钮,我目前已经这样做了。

但我想为这个过程制作动画,我希望它可以在移动设备上顺利运行。

但我无法弄清楚jquerymobile是如何做到这一点的,它工作得很好。

我需要做什么才能让一个面板(div)从左侧滑出,另一个从右侧滑入,就像使用非移动 jquery 的 mobilejquery 一样?

示例: http: //m.stanford.edu/ 这里当一个列表项被点击时,它会滑出而另一个滑入。

谢谢你。

4

1 回答 1

9

可以帮助您使用 HTML5/css/javascript 进行硬件加速动画的主要功能是-webkit-transform: translate3d css规则,该规则将幻灯片的水平 (x) 位置向左或向右转换:

translate3d(x, y, z), translateZ(z)

在 x、y 和 z 中移动元素,只在 z 中移动元素。正 z 朝向观察者。与 x 和 y 不同,z 值不能是百分比。

按照这个优秀的教程,向您展示如何使用上述功能和 javascript 在任何移动设备中滑动全屏 div。

有关使用 html5 进行硬件加速的进一步讨论,请参阅本文

于 2013-02-17T19:22:17.160 回答