title: Chaining Bouncing Entrances/ Exits with Animate.css
body: <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>