如何使用 animated.css 一次在两个元素上应用动画答案

【问题标题】：How to apply animations on two elements at once with animated.css如何使用 animated.css 一次在两个元素上应用动画
【发布时间】：2020-04-02 09:52:13
【问题描述】：

我正在制作一个简单的幻灯片，其中每张幻灯片都有自己的持续时间。我想通过在当前和下一张幻灯片上添加和删除类来使用 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() 但没有它只会显示第一张幻灯片。

【问题讨论】：

标签： javascript jquery css slideshow animate.css

【解决方案1】：

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

【讨论】：

首先感谢您的回答！该解决方案起初似乎可行，但从第二张幻灯片开始出现问题。如果您想看看会发生什么，我已将脚本放入 jsfiddle。 jsfiddle.net/RobbAdam/aecsLdjh/11
我用jsfiddle.net/6rwhx814 修复了它，我将编辑我的答案，向你展示我已经改变了。
问题是，currentSlide 变量发生了变化，因此slides.eq(currentSlide) 不再返回实际元素，如果超时过去，应该隐藏它。我通过将正确的元素保存在它自己的变量中来解决它。我称它为 $currentSlide（因为它是一个 jQuery 实例），但你可以将其命名为其他名称。
这真是太快了！ :O 非常感谢您的帮助，我了解您的解决方案！我会和这个一起去的。也会尝试另一个！
@RobbAdam 第二个答案可能更适合您的滑块类型。如果可能，应该通过 CSS 解决 CSS 问题，但两种解决方案都可以。还有...感谢您提出的问得好且结构合理的问题。 99% 的新用户不介意这些指南，只是希望他们的代码得到修复并且不想理解解决方案。我希望你能坚持下去。

【解决方案2】：

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

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

【讨论】：