javascript - 了解简单的轮播过渡代码

一般而言，我是jQuery新手，基本上完成了这一幻灯片转换，它具有最少且紧凑的代码:

$(function () {
    var str_next = $('.cara .item').eq(1);

    function slide(elem) {
        elem.addClass('next');

        $('.cara .item').each(function() {
            if ($(this).hasClass('active')) {
                console.log('does have it');
                $(this).removeClass('active');
            }
        });

        setTimeout(function () {
            elem.removeClass('next').addClass('active');
        }, 2000);
    }

    slide(str_next);
});

Fiddle here

如果仔细看一下jQuery，以下几行代码会导致一张幻灯片过渡效果:

setTimeout(function(){
    elem.removeClass('next').addClass('active');
}, 2000);

现在要发生过渡效果，将next类附加到elem是非常重要的，但是在上面的代码中，next类已从elem中删除，并且仍然存在过渡，为什么是？

例如，如果我要将上述代码行更改为以下内容:

setTimeout(function(){
    elem.removeClass('next');
    setTimeout(function() {
        elem.addClass('active');
    }, 500);
}, 2000);

不会有过渡，所以下面的工作方式:

setTimeout(function(){
    elem.removeClass('next').addClass('active');
}, 2000);

为什么尽管删除了next类却发生了过渡？

最佳答案

过渡不会播放，因为它依赖图像的位置。

在图像滑入 View 之前，其显示属性设置为none，使其不可见且位置不变。

通过添加下一类，将项目的位置设置为左侧:100％，这将使其移至右侧，从而有效地将其移出视线。

现在，当您删除下一个类并添加 Activity 类时，图像的显示属性将设置为阻止，使其可见，并且通过删除下一个类，图像将返回其原始位置(可以在动画之后看到的位置)。

现在，如果您首先删除下一个类，则图像将在不可见的同时移动到其原始位置，这就是为什么没有动画的原因。

因此，回答您的问题:下一个类为运动动画提供了一个起始位置，如果图像不在该起始位置，则不必移动，因此就没有动画。

编辑说明:过渡总是在后台播放，仅因为添加了 Activity 类，该过渡才可见。因此，即使您在添加 Activity 类之前删除了下一个类，过渡也会开始播放并变为可见。过渡来自下一个类别导致的位置差异，图像的可见性来自 Activity 类别，这些是完全独立的。因此，过渡在删除下一个类时始终会播放，但它并不总是可见的。