如何以干净的方式动画和更改滑块计数器位置？

Question

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

正如您在 gif 上看到的那样，如果我适度单击我的滑块，它会很好地工作，但是当我双击下一个 link 时，这完全破坏了计数器，由于此 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

我认为你的 HTML 结构对于动画来说不够好，所以我用另一种方法和自定义 html 标签创建了 my own fiddle，动画是使用 CSS3 转换和数字是预先计算的，以避免快速点击问题：

Jquery:

$('#change-button').click(function(){

    //Getting current slide
    var $current = $('.current'); 

    //Remove the class to find next one
    $current.removeClass('current');

    if($current.is(':last-child')){
        //Resetting the counter if is the last child
        $('#counter ul li:first').addClass('current');
        $('#counter ul').css('top','0px');
    }
    else{
        $current = $current.next();
        $current.addClass('current');
        //Getting the next number to recalculate 
        //the new top position
        var $num = parseInt($current.text());
        $('#counter ul').css('top',-($num-1)*18+'px');
    }

});

$('#change-button').click(function(){
    var $current = $('.current');
    $current.removeClass('current');
    
    if($current.is(':last-child')){
        //Resetting the counter
        $('#counter ul li:first').addClass('current');
        $('#counter ul').css('top','0px');
    }
    else{
        $current = $current.next();
        $current.addClass('current');
        var $num = parseInt($current.text());
        $('#counter ul').css('top',-($num-1)*18+'px');
    }
    
});

.container{
    background-color: #000;
    padding: 10px;
    color: #fff;
    width: 300px;
    float: left;
}
.container li{
    display: inline-block;
    vertical-align: middle;
}

#counter{
  width: 16px;
  height: 18px;
  overflow: hidden;
  position: relative;
}

#counter ul{
  position: absolute;
  padding: 0;
  margin: 0;
  height: 18px;
  width: 16px;
  transition: all .5s;
}

#counter ul li{
    display: block;
    clear: both;
    text-align: right;
}

#change-button{
    margin: 10px;
    float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <li>Graphics</li> 
    <li id="counter">
        <ul>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
        </ul>
    </li>
    <li>/ 4</li>
</div>

<button id="change-button" href="#">Change!</button>

如果动画适合您，您必须通过生成包含所有值的无序列表将它与您的代码集成，知道您有多少张幻灯片（应该很容易）。

Answer 2

虽然我同意 @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 个元素，就像我提议的那样，在加载或单击时。

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

如何以干净的方式动画和更改滑块计数器位置？

How to animate and change a slider counter position in a clean way?

javascript

jquery

swiper

gsap

Jquery: