我正在制作一个简单的幻灯片,其中每张幻灯片都有自己的持续时间。 我想通过在当前和下一张幻灯片上添加和删除类来使用 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(),但如果没有它,则只会显示第一张幻灯片。
最佳答案
两个不同元素上的原生 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
关于javascript - 如何使用animated.css同时在两个元素上应用动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60988786/