I am trying to use djax combined with css3 to animate a page load and transition. I have used the following function to add classes to all the elements I want for the transition:
function pageTransition(direction) {
direction = direction == "in" ? direction : "out";
$('div, img').each(function () {
var $item = $(this);
setTimeout(function () {
$item.addClass('slide-' + direction)
}, 80 * Math.floor((Math.random() * 5) + 1));
});
}
Then I have a css keyframe animation for the entrance and exit transition. The intro works perfect but the exit doesn't. I call the exit to run in the following way:
$(window).bind('djaxClick', function (e, data) {
// Transition content out
pageTransition('out');
});
It all works fine as in the transition works but the problem I have is the function is called, the css animation starts but the next page opens before the css animation can complete or even start. I have tried everything I can think of but I just can't get this to work.
If anyone can think of anything or point me in the right direction I would greatly appreciate it!!!
I am trying to use djax combined with css3 to animate a page load and transition. I have used the following function to add classes to all the elements I want for the transition:
function pageTransition(direction) { direction = direction == "in" ? direction : "out"; $('div, img').each(function () { var $item = $(this); setTimeout(function () { $item.addClass('slide-' + direction) }, 80 * Math.floor((Math.random() * 5) + 1)); }); }
Then I have a css keyframe animation for the entrance and exit transition. The intro works perfect but the exit doesn't. I call the exit to run in the following way:
$(window).bind('djaxClick', function (e, data) { // Transition content out pageTransition('out'); });
It all works fine as in the transition works but the problem I have is the function is called, the css animation starts but the next page opens before the css animation can complete or even start. I have tried everything I can think of but I just can't get this to work.
If anyone can think of anything or point me in the right direction I would greatly appreciate it!!!
Thanks in advance!