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

我正在制作一个简单的幻灯片，每张幻灯片都有自己的持续时间。 我想通过在当前幻灯片和下一张幻灯片上添加和删除类，使用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);
};

提前感谢您的帮助

---

注：在键入这篇文章时，我意识到它必须是.hide（），但如果没有它，则只会显示第一张幻灯片。

两个不同元素上的本机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

---

如果我的第一个答案不能让你满意，因为你想在CSS方面解决这个问题，当有第二种方法时：

删除JavaScript中的

.hide（）

确保CSS动画以一种状态结束，在这种状态下，元素将不再可见（如

transform:scale（0）

或

left:-100%

）

保持CSS动画的最终状态。为此，请参见：

---

首先谢谢你的回答！这个解决方案一开始似乎是可行的，但从第二张幻灯片来看，出现了一些问题。如果您想知道会发生什么，我已经将脚本放到了jsfiddle中。我用修复了它。我将编辑我的答案以向您显示我更改了什么。问题是，

currentSlide

变量已更改，因此

slides.eq（currentSlide）

不再返回实际元素，如果超时已过，则应隐藏该元素。我通过在它自己的变量中保存正确的元素来解决它。我称它为

$currentSlide

（因为它是一个jQuery实例），但你可以给它起个别的名字。这真是太快了！：O非常感谢您的帮助，我理解您的解决方案！我同意这个。我也会试试另一个@RobbAdam第二个答案可能更适合您的滑块类型。如果可能的话，CSS问题应该通过CSS解决，但两种解决方案都可以。而且。。。谢谢你提出的问题问得好，结构合理。99%的新用户不介意这些指导原则，只是希望自己的代码得到修复，不想了解解决方案。我希望你能坚持下去。