My journey into the world of CSS animations is relatively new, with some previous experience in JQuery. However, I encountered a problem with choppy animations on smaller devices like my iPad, nook, and android phone. To address this issue, I decided to use a CSS transition instead by toggling a class with jQuery.
When the ajax content is loaded, a hidden class is applied to the <section> tag that contains the desired portion of the page. This allows for full markup in case JavaScript is disabled, but when enabled, it grabs the <section id="sectionId">. The sectionId varies from page to page, such as <section id="home"> for index.html, <section id="contact"> for contact.html, and <section id="products"> for products.html. For demonstration purposes, let's use sectionId.
This is how it should work:
Replace the content in
#contentthrough ajax, obtaining the#sectionIdfrom the URL linked by the navigation.Add the
hiddenclass once loaded.Remove the
hiddenclass so that the CSS transition triggers, causing the loaded section to slide in from the right.
Here's the key code:
HTML:
<div id="content">
<section id="sectionId">
<!-- Content Here -->
</section>
</div>
CSS:
#content > section
{
margin-left: 0;
-moz-transition: .5s all ease-in;
-o-transition: .5s all ease-in;
-webkit-transition: .5s all ease-in;
transition: .5s all ease-in;
}
#content > section.hidden
{
margin-left: 2000px;
}
JQuery:
function loadPage(container, url, sectionId) {
container.load(url + ' #' + sectionId);
}
$(document).ajaxComplete(function (event, xhr, settings) {
$('#content > section').addClass('hidden');
$('#content > section').removeClass('hidden');
});
While this works for the index page and #home section only, the sliding transition appears to malfunction on other pages after the hidden class is removed. Despite the intended removal of the class, the transition fails to occur on these pages. The developer tools reflected the addition and removal of the class correctly, yet the transition did not execute. It was observed that leaving the home page without navigating away resulted in the correct transition upon returning. Essentially, the site reloads the home page content via ajax regardless of the link clicked.
If there are better CSS methods to achieve this or suggestions on improving the addition of the hidden class, please share your insights. The momentary display of content before adding the class due to browser variations and connection speeds presents another challenge worth addressing.