Question

我使用transit.js通过JQuery应用CSS变换和翻译，但似乎无法重置回无限轮播导航的起始位置。

这是我的HTML，其中每个图片都有一个顶部的加载器：

<nav>
    <div class="strategy-icon">
        <div class="icon">
            <div class="loader"></div>
        </div>
        <h3>Strategy</h3>
    </div>
    <div class="planner-icon">
        <div class="icon">
            <div class="loader"></div>
        </div>
        <h3>Planner</h3>
    </div>
    <div class="finder-icon">
        <div class="icon">
            <div class="loader"></div>
        </div>
        <h3>Finder</h3>
    </div>
    <div class="network-icon">
        <div class="icon">
            <div class="loader"></div>
        </div>
        <h3>Network</h3>
    </div>
</nav>

要设置初始状态，我只使用CSS，因此不会显示加载程序：

.loader {
    position: absolute;
    width: 215px;
    left: -215px;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
}

周围的<div>使用溢出设置隐藏加载器：

.icon {
    width: 100%;
    height: 0;
    padding-bottom: 57.5%;
    display: inline-block;
    position: relative;
    border: 1.5px solid rgb(0, 30, 65);
    margin-bottom: 1.25%;
    overflow: hidden;
}

然后，在轮播中的活动项目的每次更改中，或者通过单击导航，我使用了许多JQuery变体来确保加载器被隐藏，然后才能为其设置动画：

$('nav > div > .icon > .loader').css({
    left: -215
});

$('nav > div:nth-child(' + globalCounter + ') > .icon > .loader').transition({
    left: 0,
    duration: intervalDuration,
    easing: animationStyle
});

对globalCounter的引用只是一个与setInterval一起计数的增量变量，而设置intervalDuration的变量是我脚本中较早的整数集。同样，animationStyle是在我的脚本中先前设置为变量的字符串。

任何人都可以解释为什么JQuery CSS重置仍然会应用转换效果，而不是立即重置，而不是动画？

使用transit.js重置transform / translate时出现问题

0 个答案: