CSS3 中的滑动动画答案

【问题标题】：Swipe Animation in CSS3CSS3 中的滑动动画
【发布时间】：2011-08-22 06:39:34
【问题描述】：

我目前正在开发一个用 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，同时显示新的？

【问题讨论】：

标签： jquery ios css webkit

【解决方案1】：

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

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

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

-webkit-transition: left 1s linear;

【讨论】：