如何以干净的方式设置动画并更改滑块的相对位置? [英] How to animate and change a slider counter position in a clean way?

问题描述

我有一个滑动器滑块和一个类似"1/10"的相对位置.我想用动画更改当前幻灯片编号(1).我知道如何替换数字，但是用这个动画，就像另一个故事:

I have a Swiper slider and a counter position like "1/10". I would like to change that current slide number (the 1) with an animation. I know how to replace the number but with this animation, it's like another story:

正如在gif上看到的那样，如果我适度单击滑块，效果很好，但是当我双击下一个链接时，如果双击两次或三次，这完全会破坏计数器，因为此gif示例.
你知道我该怎么做吗?

As you can see on the gif, it's working nicely if I click moderately on my slider, but when I double-triple-or-crazy click on the next link, that totally breaks the counter, due to the clone made in this gif example.
Do you know how can I do that in a better way?

我做了一个jsfiddle，仅用于第一次计数更改:
— http://jsfiddle.net/asb39sff/1/

I made a jsfiddle, working for the first count change only:
— 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);
}

推荐答案

虽然我同意 @Tom Sarduy 方法，但实际上会推荐它，因为它是HTML元素的一次性创建，但是为您提供另一个想法，这里是我已经能够快速创建的内容.

While I agree with @Tom Sarduy approach and actually would recommend it since it is a one-time creation of HTML elements but just to provide you with another idea, here is what I have been able to create quickly.

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元素(如我建议的那样).

So I guess it is up to you to take whichever approach you like i.e. one-time creation of HTML elements on load or on click like the one I am proposing.

为代码的丑陋而道歉，这只是我急忙准备的东西.希望它能有所帮助.

Apologies for the ugliness of the code, just something I cooked up in a hurry. Hope it helps in some way though.

这篇关于如何以干净的方式设置动画并更改滑块的相对位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！