0

I have in mind a few fade-ins, then a fade-out, and ending in a new page being load (target=self). From some googling, it seems css animation doesn't foresee the last step (fetching a new URL).

Is there a simple way to do that? The starting page will be loading jquery. Somehow the new URL has to wait until the animation ends.

Update

In the end, I used this css animation tutorial to make a 5-second animation, inserted all css in the <head> and pasted the images in the page in base64 (no further HTTP requests), checked the resulting file size (11Kb), checked Google Analytics to see my average page load times for files that size (less than 1 second) then added to the page <META http-equiv="refresh" content="8; url=page2.html">. Feels like something from the 1990s, but it works.

plugincontainer
  • 630
  • 2
  • 9
  • 28

3 Answers3

1

It depends if your animation is powered by CSS or jQuery, a question raised by a few others, too. If it is CSS-based, you can listen to the animationend event (with appropriate vendor prefixes added to maximize cross-browser compatibility):

$(ele).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
    // Load new URL
    window.location.href = newURL;
});

See demo fiddle here: http://jsfiddle.net/teddyrised/pqxsj8v9/

If your animation is jQuery powered, i.e. using the .animate() method, simply use the callback function:

$(ele).animate({
    // Animate stuff
}, duration, function() {
    // Load new URL
    window.location.href = newURL;
});

See demo fiddle here: http://jsfiddle.net/teddyrised/ad0vtqyt/

Terry
  • 63,248
  • 15
  • 96
  • 118
  • I'd like to just use css. But in your first jsfiddle example I see some animation but no new URL loading in the result frame. – plugincontainer Dec 18 '14 at 16:45
  • JSFiddle do not accept `window.location`. There are plenty of exmaples out there how to redirect to another URL with JS: http://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-in-jquery-javascript – Terry Dec 18 '14 at 18:33
  • OK, will check it out and get back. I have no idea where I insert window.location – plugincontainer Dec 18 '14 at 18:39
0

If the animation time is always the same, you can handle the excact time of animation, and load the page after this time.

Simos
  • 122
  • 1
  • 3
  • Do you mean using ? If so, a problem might be: if the starting page loads slow, e.g. images needed for the animation, the refresh might kick in before the animation ends. – plugincontainer Dec 18 '14 at 16:22
0

how are you firing the animation, you mentioned jquery, so if you are using jquery for the animation you can always use the callback to load your page or set a timeout etc

$('.someElement'.animate({}, timeFrame, function () {

    // fire cod ein here or set a timeout for when the whole animation is done
    setTimout(function () {
        //code here
    }, timeForAnimationToFinish):

});

jquery animate docs

if you are adding classes and using css3 transition, you could always do:

$('#someThing').addClass('animateMeFor30Seconds', function () {
    var someThing = $(this);
    setTimeout(function () {
        //next animation
    }, 30000);
});

It's not the greatest, but it will pass your unit tests and allow you to refector :-)

atmd
  • 7,430
  • 2
  • 33
  • 64
  • I wasn't going to use jquery for the animation, just css, like here: http://codepen.io/anon/pen/jlfdG (I'm using jquery for some other stuff). In your suggested code, what's going to load the new URL? (I'm a bit weak on javascript)... Or, to keep it simple (for me), taking this code from codepen,
    look at me fade in
    how do I load a new URL?     – plugincontainer Dec 18 '14 at 16:28
  • you could do it like in the code pen, using the same css, but use jquery ONLY to add the class to the elements, then you'd still get the callback. I wouldnt normally recomend jquery, but if your loading it in anyway . . – atmd Dec 18 '14 at 16:32