jquery - 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');
}

这非常适合显示被点击的 anchor 元素。但是，我现在想创建一个 CSS 过渡(像幻灯片过渡一样简单)。我知道我可以使用 jQuery 和 animate() 来实现这一点，但我更愿意使用完全 CSS3 动画(类似于过渡变换)，因为 iOS 为这些动画提供了硬件加速。

任何人都可以指出正确的方向，关于如何使用这个标记我可以添加动画以从右到左删除当前 div，同时显示新的？

Answer 1

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

要将页面显示在屏幕上，您需要删除 .left 类并将其更改为 .current。

要使过渡动画化，您需要在 .page 类上使用 CSS 规则，例如:

-webkit-transition: left 1s linear;