在CSS3中滑动animation

我目前正在研究用HTML 5，CSS3和jQuery编写的移动应用程序框架。 对于“屏幕”的标记，我有以下布局： 

<div class="page" id="home"> <!-- some content is here... --> </div> <div class="page" id="lists"> <!-- some more content is here... --> </div>

我目前正在使用jQuery来检测页面上的第一个div元素，并将其class属性设置为current 。 然后我有下面的CSS声明隐藏除了page.current任何东西： 

 div.page { display: none; } div.page.current { display: block; }

每当浏览器检测到哈希更改事件（ window.onhashchange ），我运行以下jQuery： 

 if(window.location.hash) { var the_hash = window.location.hash.substring(1); if($('#' + the_hash).length > 0) { $('.current').removeClass('current'); $('#' + the_hash).addClass('current'); } } else { $('div').eq(0).addClass('current'); }

这对于显示哪个锚点元素被点击很有效。 不过，我现在想创build一个CSS转换（像幻灯片转换一样简单）。 我知道我可以使用jQuery和animate()来实现这一点，但是我更愿意完全使用CSS3animation（类似于转换变换），因为iOS为这些animation提供了硬件加速。

任何人都可以向我指出正确的方向，用这个标记，我可以添加一个animation，从右到左清除当前的div ，同时显示新的animation。

最简单的方法可能是为每个离屏页面添加另一个类，例如.left和.right ，将页面定位到屏幕的那一边，也许使用left: CSS属性。

要将页面拖到屏幕上，您将删除.left类并将其更改为.current 。

要为转换设置animation效果，您需要在.page类中使用CSS规则，例如： 

 -webkit-transition: left 1s linear;
Interesting Posts