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

Question

我刚开始玩 animate.css，尝试使用他们的 bounceInRight/ bounceOutLeft 动画。这个想法是有一个部分将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。也许有一种方法可以在我弄乱动画类之前确保我的元素离开页面？

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"
    },
]

现在在我们的 $(document).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);
}

现在您可以在对象数组中添加您想要的所有动画，其余的将由我们的另外两个 sn-ps 处理。

玩得开心！