理解简单的轮播转换代码

Understanding simple carousel transition code

本文关键字：转换 代码 简单      更新时间：2023-09-26

我是一个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);
});
这里的

小提琴

如果你仔细看一下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类转换发生?

这个过渡无法播放，因为它依赖于图像的位置。

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

通过添加next类，项目的位置被设置为left: 100%，这导致它向右移动，有效地从视图中消失。

当你现在移除下一个类并添加活动类时，图像的display属性被设置为block，使其可见，并且通过移除下一个类，图像返回到其原始位置(在动画之后你可以看到它)

现在，如果你先删除下一个类，图像将移动到原来的位置，而不可见，这就是为什么没有动画。

那么回答你的问题:下一个类为移动动画提供了一个起始位置，如果图像不在起始位置，它就不必移动，所以没有动画

编辑说明:过渡总是在后台播放，只是因为添加了活动类，它才变得可见。因此，即使在添加活动类之前删除下一个类，过渡也会开始播放并变得可见。过渡来自下一个类的位置差异，图像的可见性来自活动类，这些是完全分开的。因此，当移除下一个类时，过渡总是播放，它只是不总是可见的。

相关文章：