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

我刚开始玩animate.css，尝试使用他们的

bounceInRight

/

bounceOutletft

动画。我们的想法是创建一个将

bounceOutletft

的部分，让它的容器slideUp（）/next container slideDown（），然后在下一个容器的内容上使用bounceInRight

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

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

---

我想问题的主要原因是我同时切换了

bounceInRight

和

bounceOutlet

。也许有一种方法可以确保在我搞乱动画类之前，我的元素不会出现在页面上？

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

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

首先，使用要添加到javascript中的类创建元素：

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

现在在我们的$（文档）中。准备好了吗？我们将添加一些代码来浏览事件列表并创建时间线

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

现在，您只需在对象数组中添加所需的所有动画，其余部分将由我们的另外两个片段处理

---

玩得开心

很好！我也考虑过使用SetTimeout来实现这一点，但我认为如果它运行缓慢，你会看到元素四处跳跃（我特别考虑的是将它们删除/添加到屏幕上的动画）。我可能会使用这种方法，而不是试图通过这种方式捕捉事件和链接动画。

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

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