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

现在在我们的$（文档）.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);
}

现在你可以在对象数组中添加你想要的所有动画，我们的另外两个片段将处理其余的动画。

玩得开心！

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

1 个答案: