我构建了一个 Web 应用程序，它使用 CSS @media 查询缩小为适合移动设备的版本。
我想要一个按钮来在显示 DIV 的两个主要内容之间切换。
当页面加载时，使用 @media 查询，另一个通过 display: none; 隐藏
当单击按钮时，我希望它显示并隐藏可见的按钮，我目前已经这样做了。
但我想制作这个过程的动画，我希望它能够在移动设备上顺利运行。
但我不知道 jquerymobile 是如何做到这一点的，它工作得很好。
我需要做什么才能让一个面板(div)从左侧滑出，另一个面板从右侧滑入，就像使用非移动 jquery 的 mobilejquery 一样？
示例:http://m.stanford.edu/ 在这里，当单击一个列表项时，它会滑出，另一个会滑入。
谢谢。
最佳答案
可以帮助您使用 HTML5/css/javascript 进行硬件加速动画的主要功能是 -webkit-transform: translate3d 将幻灯片的水平 (x) 位置向左或向右平移的 css 规则:
translate3d(x, y, z)，translateZ(z)
移动 x、y 和 z 方向的元素，仅移动 z 方向的元素。正 z 朝向观察者。与 x 和 y 不同，z 值不能是百分比。
关注这个优秀的tutorial它向您展示了如何使用上述函数和 javascript 在任何移动设备中滑动全屏 div。
有关 html5 硬件加速的进一步讨论，请参阅 this文章。
关于jQuery:如何让DIV滑出屏幕并让另一个滑入？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14922221/