javascript - 如何以干净的方式动画和更改 slider 计数器位置？

Question

我有一个 Swiper slider 和一个计数器位置，如“1/10”。我想用动画更改当前幻灯片编号(第 1 张)。我知道如何替换数字，但有了这个动画，它就像另一个故事:

正如您在 gif 上看到的那样，如果我在我的 slider 上适度单击它会很好地工作，但是当我双击下一个链接时三重或疯狂地单击，这完全打破了计数器，因为克隆在这个 gif 示例。
你知道我怎样才能更好地做到这一点吗？

我做了一个 jsfiddle，只为第一个计数变化工作:
— http://jsfiddle.net/asb39sff/1/

// Init
var $c_cur = $("#count_cur"),
    $c_next = $("#count_next");

TweenLite.set($c_next, {y: 12, opacity: 0}, "count");


// Change counter function
function photos_change(swiper) {
    var index = swiper.activeIndex +1,
        $current = $(".photo-slide").eq(index),
        dur = 0.8,
        tl = new TimelineLite();

    // Just a test
    tl.to($c_cur, dur, {y: -12, opacity: 0}, "count")
      .to($c_next, dur, {y: 0, opacity: 1}, "count")

    //$c_cur.text(index);
    //$c_next.text(index + 1);
}

Answer 1

虽然我同意 @Tom Sarduy 方法并且实际上会推荐它，因为它是一次性创建 HTML 元素，但只是为您提供另一种想法，这里是 what I have been able to create很快。

CSS 更改:

.counter .next, .counter .count {
    position:absolute;
}
.counter .next {
    transform:translateY(-12px);
    left:0;
}

JavaScript 变化:

//added before your [photos_change] method
var counter = $('.counter');
var currentCount = $('<span class="count">1<span/>');
counter.append(currentCount);
//

//and then inside your [photos_change] event handler
var prevCount = $('.count');
currentCount = $('<span class="count next">' + index + '<span/>');
counter.append(currentCount);
TweenMax.to(prevCount, dur, {
    y: -12,
    opacity: 0,
    onCompleteParams: [prevCount],
    onComplete: function (prevCount) {
        prevCount.remove();
    },
    ease: Power2.easeOut
});
TweenMax.fromTo(currentCount, dur, {
    y: 12,
    opacity: 0
}, {
    y: 0,
    opacity: 1,
    ease: Power2.easeOut
});
//

所以我想这取决于您采用您喜欢的任何一种方法，即在加载时或在单击时一次性创建 HTML 元素，就像我提议的那样。

对代码的丑陋表示歉意，这只是我匆忙编造的东西。希望它能以某种方式提供帮助。