如何使用animated.css在两个元素上同时应用动画

Question

我正在制作一个简单的幻灯片，其中每个幻灯片都有自己的持续时间。我想通过在当前和下一张幻灯片上添加和删除类来使用animate.css在幻灯片之间添加过渡效果。我的问题是-使用我目前的方法-只有下一张幻灯片会被动画化（它会滑入），但是当前的一张幻灯片只是消失而没有任何动画。我试图检测当前动画的结尾，然后更改（添加/删除）类，但是在那种情况下，幻灯片之间有巨大的空隙...

如何确保同时播放两个动画？`

var slides = $this.find('.slide');

slideIt = function(time) {
    setTimeout(function() {

        var duration = slides.eq(nextSlide).data('duration');

        slides.eq(currentSlide)
        .removeClass(animateIn)
        .addClass(animateOut)
        .hide();


        slides.eq(nextSlide)
        .removeClass(animateOut)
        .addClass(animateIn)
        .show();

        slideIt(duration);

        currentSlide = nextSlide; nextSlide ++;
        if (nextSlide == slidesLength) { nextSlide = 0;}

    },time);
};

谢谢您的帮助！

Ps .：在键入此帖子时，我已经意识到它必须是.hide（），但没有显示的只是第一张幻灯片。

Answer 1

如果我的第一个答案不能满足您，因为您想在CSS方面解决，则有第二种方法：

1. 删除JavaScript中的.hide()。
2. 请确保CSS动画以某种状态结束，那里的元素不再可见（例如transform: scale(0)或left: -100%）。
3. 保持CSS动画的最终状态。为此，请参见：Maintaining the final state at end of a CSS3 animation

Answer 2

两个不同元素上的本地CSS动画应始终同时运行。但是，如果隐藏元素，则该元素甚至在动画开始之前就消失了。您必须为此添加一个计时器。

    slides.eq(currentSlide)
    .removeClass(animateIn)
    .addClass(animateOut);
    // save the jQuery instance of the element that should be hidden.
    var $currentSlide = slides.eq(currentSlide);
    // hide this element later
    setTimeout(function() {
      $currentSlide.hide();
    }, 1000); // 1000 for 1000ms, replace that with the duration of the animateOut animation