使用Animate.css链接弹跳入口/出口

Question

我刚开始玩animate.css，试图使用他们的bounceInRight/bounceOutLeft动画。这个想法是有一个bounceOutLeft的部分，有它的容器slideUp（）/下一个容器slideDown（），然后对下一个集装箱的内容使用boundInRight。

到目前为止，我已经使事件正常工作，但当我应用boundInRight时，我的元素不会从最左边出现，而是在正常位置。它只是在适当的位置设置了一些动画。

示例时间！（请注意，这个回调纠缠的代码将被大量重构，我只是想先让它工作起来。）

$('#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。也许有一种方法可以在我弄乱动画类之前确保我的元素离开页面？

Answer 1

现在你正在jQuery中制作大部分动画，但你不必这么做。你可以在animate.css.中制作这些动画

我现在正在处理同样的问题，所以这本身不是一个解决方案，但这是一个很好的方向。我创建了一个我想发生的事件的时间表，然后我随时触发这些事件。

首先用您想在javascript:中添加的类创建元素

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

现在，在我们的$（文档）.ready中，我们将添加一些代码来浏览事件列表并创建一个时间轴

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

最后，我们需要函数"runAnimation"来遍历并使用时间线创建所有超时。

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

现在你只需要在对象数组中添加所有你想要的动画，我们的另外两个片段将处理剩下的

玩得开心！