Phi*_*hil 2 css jquery slide jquery-mobile css-animations
我已经构建了一个Web应用程序,可以使用CSS @media查询缩小到适合移动设备的版本.
我想有一个按钮在显示DIV的两个主要内容之间切换.
当页面加载时,使用@media查询,另一个通过隐藏 display: none;
单击一个按钮时,我希望它显示并隐藏可见的按钮,这是我目前已经完成的.
但我想为这个过程制作动画,我希望在移动设备上顺利运行.
但我无法弄清楚jquerymobile如何做到这一点,它完美无缺.
我需要做什么才能使面板(div)从左侧滑落,另一个从右侧滑入,就像使用非移动jquery的mobilejquery一样？
示例:http://m.stanford.edu/ 在单击列表项时,它会滑出,另一个滑入.
谢谢.
可以帮助您使用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进行硬件加速的进一步讨论,请参阅此文章.