Chaining Bouncing Entrances/ Exits with Animate.css

Question

I've just started playing with animate.css, attempting to use their bounceInRight/ bounceOutLeft animations. The idea is to have a section that will bounceOutLeft, have it's container slideUp()/ next container slideDown(), then use bounceInRight on the next container's content.

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.

Example time! (Please note that this callback entangled code will be refactored heavily, I'm just looking to get it working first.)

$('#stat-switcher').on('click', '.graph-toggle', _publics.toggleGraph);

_publics.toggleGraph = function(e) {
  if (_viewMode != 'table' && _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');
};

I think the main reason for my problem is that I'm toggling both bounceInRight and bounceOutLeft at the same time. Maybe there's a way of ensuring my element's off the page before I mess with the animation classes?

Answer 1

Right now you're doing most of your animations in jQuery but you don't have to. You can do those animations in animate.css.

I'm working on this same problem right now so this isn't a solution per se but it is a good direction. I created a timeline of events that I wanted to have happen, and then I trigger those whenever I like.

First create the elements with the classes you'd like to add in javascript:

var animations = [
    {
        time:0,
        classes:"bounceInLeft"
        selector:"table"
    },
    {
        time:500,
        classes:"bounceInLeft"
        selector:"table"
    },
    {
        time:400,
        classes:"bounceInLeft"
        selector:"table"
    },
]

Now inside of our $(document).ready we'll add some code to go through the list of events and create a timeline

var timeline = 0;
for(var i=0; i<animations.length; i++){
    timeline = parseInt(animations[i].time, 10) + parseInt(timeline, 10);
    runAnimation(i, timeline);
}

Finally we need the function "runAnimation" to go through and create all the timeouts using the timeline.

function runAnimation(i, timeline){
    setTimeout(function(){
        console.log(i);
        $(animations[i].selector).addClass(animations[i].step);
    }, timeline);
}

Now you can just add all the animations you want in the object array and our two other snippets will handle the rest.

Have fun!