Currently, I am in the process of developing a mobile application framework using HTML 5, CSS3, and jQuery. The layout for the 'screens' markup is structured as follows:
<div class="page" id="home">
<!-- content goes here... -->
</div>
<div class="page" id="lists">
<!-- more content goes here... -->
</div>
My approach involves using jQuery to identify the first div element on the page and assign its class attribute as current. Subsequently, I have implemented CSS rules to hide all page elements except for those with the class current:
div.page {
display: none;
}
div.page.current {
display: block;
}
Upon detection of a hash change event in the browser (window.onhashchange), the following jQuery code is executed:
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');
}
While this functionality effectively displays the clicked anchor element, I am now interested in adding a CSS transition (such as a slide transition) to enhance the user experience. Rather than utilizing jQuery and animate(), I would prefer to leverage CSS3 animations (specifically transitioning transforms) due to the hardware acceleration they offer on iOS devices.
I am seeking guidance on how to implement an animation that slides the current div from right to left while simultaneously revealing the new one, within the existing markup structure.