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 属性设置为 <代码>当前。然后，我有以下 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;