Databases
StackOverflow2013
Postsdbo
POChaining Bouncing Entrances/ Exits with Animate.css
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChaining Bouncing Entrances/ Exits with Animate.css
    text
    copied!<p>I've just started playing with animate.css, attempting to use their <code>bounceInRight</code>/ <code>bounceOutLeft</code> animations. The idea is to have a section that will <code>bounceOutLeft</code>, have it's container slideUp()/ next container slideDown(), then use bounceInRight on the next container's content.</p> <p>So far I have the events working correctly, however when I apply my bounceInRight, my element doesn't appear from the far left, it's in the normal spot. It just animates a bit in place.</p> <p>Example time! (Please note that this callback entangled code will be refactored heavily, I'm just looking to get it working first.)</p> <pre><code>$('#stat-switcher').on('click', '.graph-toggle', _publics.toggleGraph); _publics.toggleGraph = function(e) { if (_viewMode != 'table' &amp;&amp; _viewMode != 'graph') return false; var $table, $graph, nextView, animationEvents = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd'; if (_viewMode == 'table') { $table = $(this).closest('#stat-switcher').find('.table'); $graph = $(this).closest('#stat-switcher').find('.graph'); nextView = 'graph'; } else { $table = $(this).closest('#stat-switcher').find('.graph'); $graph = $(this).closest('#stat-switcher').find('.table'); nextView = 'table'; } _viewMode = 'transition'; $(this).find('.icon').toggleClass('icon-bar-chart icon-table'); $table.on(animationEvents, function() { $table.off(animationEvents); $table.slideUp(function() { $graph.slideDown(function() { $graph.on(animationEvents, function() { $graph.off(animationEvents); _viewMode = nextView; }); $graph.toggleClass('bounceInRight bounceOutLeft'); }); }); }); $table.toggleClass('bounceInRight bounceOutLeft'); }; </code></pre> <p>I think the main reason for my problem is that I'm toggling both <code>bounceInRight</code> and <code>bounceOutLeft</code> at the same time. Maybe there's a way of ensuring my element's off the page before I mess with the animation classes?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload