Question

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>

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;
    }

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

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?

Answer 1

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.

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

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

-webkit-transition: left 1s linear;