背景图像Cross Fade可以工作，但不是第一次被触发

Question

我通过在几个重叠的opacity上使用div转换来制作背景图片幻灯片，并循环显示触发一个单独图层的top css类。

一切都运行良好，转换看起来非常好，除了第一次时间转换发生。第一次，过渡是瞬间而不是交叉渐渐。

此Meteor rendered回调处理每9秒将top类移动到一个新图层。这里有一个有趣的怪癖是console.log在第一张幻灯片消失之前发生，大​​致是我设置转换时间的数量。看起来好像过渡是尝试发生，但只是在转换时间结束时跳转到它的最终值。

Template.backgroundPictures.rendered = function () {
    Meteor.setInterval(function () {
        // This console log happens BEFORE the first slide disappears.
        console.log('switch');

        var currentSlide = $('.background-slide.top');
        var nextSlide = currentSlide.next('.background-slide');
        if (nextSlide.length === 0) nextSlide = $('.background-slide').first();

        currentSlide.removeClass('top');
        nextSlide.addClass('top');

    }, 9000);
};

这是幻灯片的标记。我使用top类初始化第一张幻灯片，并且我已尝试过其他方式，例如在呈现页面时使用jquery命令$('.background-slide).first().addClass('top');，但它会给出相同的结果。< / p>

<template name="backgroundPictures">
    <div id="hands" class="background-slide top"></div>
    <div id="score" class="background-slide"></div>
</template>

这是我的less处理此问题。我已经省略了显示特定的东西（定位等），因为它们都工作得很好。

.generic-transition {
    transition-property:all .5s ease-out 0s;
    -moz-transition:all .5s ease-out 0s;
    -webkit-transition:all .5s ease-out 0s;
    -o-transition:all .5s ease-out 0s;
}
.background-slide {
    // Stuff relating to positioning etc.

    opacity: 0;
    &.top {
        opacity: 1;
    }

    &#hands {
        background: url('/handsplaying.jpg') no-repeat fixed center center;
    }
    &#score {
        background: url('/piano.jpg') no-repeat fixed center center;
    }
}

上面我将过渡长度设置为.5s，但是当我尝试使用更长的值来仔细查看发生的情况时，在我看来，第一张幻灯片是我初始化的那张幻灯片。 top课程，不会淡出，但第二张幻灯片 正在淡入。

为什么会这样？当从html提供类名时，转换的工作方式是否不同？如果是这样的话，为什么不用jquery初始化第一张幻灯片给出不同的结果呢？

我在Ubuntu上使用Chrome。

提前致谢！

Answer 1

问题最终只是跳动动画。似乎第一次任何动画在页面上发生，它会发抖，大概是在它设置环境的时候？

将网站部署到真实服务器后，问题就不再进行本地测试了。