在CSS3中滑动动画 [英] Swipe Animation in CSS3

问题描述

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

I am currently working on a mobile application framework written in HTML 5, CSS3 and jQuery. For the markup of the 'screens', I have the following layout:

<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 之外的任何东西：

I am currently using jQuery to detect the first div element on the page and set it's class attribute as current. I then have the following CSS declaration which hides anything other than page.current:

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

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

Whenever the browser detects a hash change event (window.onhashchange), I run the following 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提供硬件加速对于这些动画。

Which works great at showing whichever anchor element was clicked. However, I would now like to create a CSS transition (something simple like a slide transition). I know that I could achieve this using jQuery and animate(), but I would prefer to go with an entirely CSS3 animation (something like transitioning transforms), because iOS provides hardware acceleration for these animations.

任何人都可以指向我正确的方向，如何，用这个标记我可以添加一个动画擦除当前的

Could anyone point me in the right direction as to how, with this markup I might add in an animation to wipe the current div from right to left, while at the same time showing the new one?

推荐答案

最简单的方法是从右到左，方法可能是为每个离屏页面添加另一个类，例如 .left 和 .right 只需关闭屏幕就可以使用 left： CSS属性。

The simplest way is probably to add another class to each offscreen page, such as .left and .right, that positions the page just off the screen to that side, maybe using use the left: CSS property.

屏幕上，您将删除 .left 类并将其更改为 .current 。

To bring the page onto the screen, you would remove the .left class and change it to .current.

要为转换制作动画，您需要在 .page 类中使用CSS规则，如：

To animate the transition, you'd need a CSS rule on the .page class like:

-webkit-transition: left 1s linear;

这篇关于在CSS3中滑动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！