在CSS3中滑动动画

Question

我目前正在研究用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'); 
} 

其中的伟大工程显示哪个锚点被点击。不过，我现在想创建一个CSS转换（像幻灯片转换那样简单）。我知道我可以使用jQuery和animate()来实现这一点，但我更愿意完全使用CSS3动画（类似于转换变换），因为iOS为这些动画提供硬件加速。

任何人都可以点我正确的方向，用这个标记我可以添加一个动画，从右到左擦除当前div，同时显示新的？

Answer 1

最简单的方法可能是另一个类添加到每个屏幕外页面，如.left和.right，用来定位页面就在屏幕的一侧，也许使用使用left: CSS属性。

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

以设置过渡动画，你需要在.page类像一个CSS规则：

-webkit-transition: left 1s linear;