javascript - Animate.css を使用した跳ねる入口/出口の連鎖

Question

bounceInRight/bounceOutLeftアニメーションを使用しようとして、animate.css で遊び始めたところです。アイデアは、bounceOutLeftコンテナのslideUp（）/次のコンテナのslideDown（）を持ち、次のコンテナのコンテンツでbounceInRightを使用するセクションを持つことです。

これまでのところ、イベントは正しく機能していますが、bounceInRight を適用すると、要素が左端から表示されず、通常の場所に表示されます。その場で少しだけアニメーションします。

例の時間！(このコールバックの絡み合ったコードは大幅にリファクタリングされることに注意してください。最初に機能するようにするだけです。)

$('#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');
};

私の問題の主な理由は、両方bounceInRightをbounceOutLeft同時に切り替えていることだと思います。アニメーション クラスをいじる前に、要素がページから外れていることを確認する方法はあるのでしょうか?