In a previous article, I demonstrated how you can use jQuery to Transition AJAX Content into view with $.animate(). In this article, we are going to remove the jQuery animation and use CSS3 instead.
Before starting, I must profess (again) that I am not a designer, so don't expect this to be pretty – just functional! Once you have the basic functionality down, it can be prettied up quickly. The purpose of this process is to have a container with the current content a user is viewing. Just to the right of this content should be another container (just a hint of it anyways) that the new content will be loaded into. Once the AJAX Javascript event handling request completes, the content will be embedded into the right container. Once embedded, this container will be transitioned into view and the content will be swapped. This is accomplished with the following code: The basics to this HTML are that there is a container called content. This will be the outer container. Inside of here are two div tags. The first, active-content, is what will house the currently viewed content. The second div, ajax-content, should be empty – unless you wish to include some "sneak peek". Now instead of using jQuery animations, I am going to use CSS3 animations instead. The CSS required to perform the animations is as follows: Since each browser is currently implementing the animations differently, they must be manually defined for all browsers. Hopefully this will go away in the near future because it adds a lot of extra code… In the above example, the animation is going to start from the left at 900 pixels and move right until it reaches 0 pixels over the span of 1 second. The final thing that needs to be done is to add the Javascript function slideMe that will perform the AJAX call and then animate the content in. jQuery is also required to simplify the AJAX and CSS class adding/removal. When the AJAX content has finished loading, I add a class to the ajax-content div that contains the CSS animation. I've also set a timer for 1 second so the content can be swapped into the active-content container once the animation has finished. Once you add some design flare to this example, you can begin making your content look like it is pre-loaded and animate it in place through AJAX and some basic CSS3 animations. Published on Mar 1, 2019 Tags: The Ultimate CSS Tutorial for Beginner Programmers
| AJAX
Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article
that you just finished reading.
Jamie Munro is the author of ASP.NET MVC 5 with Bootstrap and Knockout.js,
Knockout.js: Building Dynamic Client-Side Web Applications,
20 Recipes for Programming MVC 3,
and 20 Recipes for Programming PhoneGap. He has been developing websites and web applications for over 20 years. Jamie began his writing career in 2009. As the success of Jamie's blog grew, he turned his writing passion to books about web development in hopes that his many years of experience could be passed on to his readers. No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner
or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in
and improve your skillset with any of the tutorials below.
Setting up CSS Animations
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your title</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Your title</h1>
</div>
<div id="content">
<div id="active-content">
Current content goes here. <a href="#" onclick="return slideMe()">Slide new content</a>
</div>
<div id="ajax-content"></div>
</div>
<div id="footer">
Copyright you
</div>
</div>
</body>
</html>
CSS Animation with @keyframes
.ajax-content-animate {
position: absolute;
animation:mymove 1s infinite;
-moz-animation:mymove 1s infinite; /*Firefox*/
-webkit-animation:mymove 1s infinite; /*Safari and Chrome*/
}
@keyframes mymove {
from {left:900px;}
to {left:0px;}
}
@-moz-keyframes mymove {
from {left:900px;}
to {left:0px;}
}
@-webkit-keyframes mymove {
from {left:900px;}
to {left:0px;}
}
function slideMe() {
$('#ajax-content').load('index2', function() {
$("#ajax-content").addClass("ajax-content-animate");
setTimeout("swapMe()", 1000);
});
}
function swapMe() {
$("#ajax-content").removeClass("ajax-content-animate");
// swap the content
$("#active-content").html($("#ajax-content").html());
$("#ajax-content").html("");
}
Related Posts
Tutorials
Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.