javascript - 动画不缓和

Question

我的过渡有一些问题。这是 javascript/jquery

function moveProgressBar(v, a) {
    var getPercent = v / 100;
    var getProgressWrapWidth = $('.progress-wrap').width();
    var progressTotal = getPercent * getProgressWrapWidth;
    var animationLength = a;

    $('.progress-bar').stop().animate({
        left: progressTotal
        }, animationLength, function(){

        if (getPercent === 1) {

            $('.progress').css('height','auto');
            $('.progress_checkout').text('Proceed to checkout!');
        } else {
            $('.progress').css('height','2rem');
            $('.progress_checkout').text('');
        }
    });
}

.progress_checkout{
    text-align: center;
    margin: auto 0;
    display: block; 
    color: #fff; 
    font-weight: bold;
    padding: 2rem 0;
    transition: ease-in-out 0.6s;
    font-size: 200%;
}

.progress_checkout:hover{
   background-color: white;
   color: #C6DA80;
   cursor: pointer;
}

.progress {
    width: 100%;
    height: 2rem;
}

.progress-wrap {
    background: #C6DA80;
    margin: 20px 0;
    overflow: hidden;
    position: relative;
}

.progress-bar {
    background: #F5F5F5;
    left: 0;
    position: absolute;
    top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap progress" data-progress-percent="0">
    <a class="progress progress_checkout"></a>
    <div class="progress-bar progress"></div>
</div>

我想要做的是，当这个进度条已满时显示文本并使进度条变大。它会这样做，但动画是即时的，而不是超过 0.5 秒左右。我已经用 addClass 和 removeClass 试过了，结果完全一样。我什至在它可能接触到的所有元素上添加了过渡，并且它仍然是即时的。

NOTE: If something seems missing please let me know because i might have not pasted all the code. Though as far as I'm concerned this should be everything related too the animations

Answer 1

jQuery 的动画使用它自己的 easing parameter .不幸的是，只有 swing 和 linear 可用

The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

Documentation .

你有两个选择。

第一个是CSS3 Animations ，您可以使用它来计时和组合多个动画。所以我建议切换回类并使用 CSS。

第二个是使用 jQuery UI ，其中包含以下缓动选项列表:

linear
swing
_default
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInExpo
easeOutExpo
easeInOutExpo
easeInSine
easeOutSine
easeInOutSine
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

您选择或喜欢什么取决于您。