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，它完全相同。我甚至在可能接触的元素上添加了转换，它仍然是即时的。

注意：如果有什么东西似乎缺失，请告诉我，因为我可能没有粘贴所有代码。虽然我对此很担心应该是与动画相关的一切

Answer 1

jQuery的动画使用它自己的easing parameter。很遗憾，只有swing和linear可用

jQuery库中唯一的缓动实现是默认的，称为swing，并且以恒定的速度进行，称为线性。使用插件可以获得更多的缓动功能，尤其是jQuery UI套件。

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

您选择或喜欢的是由您自己决定的。

Answer 2

感谢您的帮助，但这最终成了我的修复。使用不透明度并使标记包含“”可以避免文本插入的突然跳转，从而使转换变得平滑。

if (getPercent === 1) {

    $('.progress').animate({height: "4rem"}, 1000);
    $('.progress_checkout').text('Proceed to checkout!');
    $('.progress_checkout').animate({opacity: 1}, 800);
} else {
    $('.progress').animate({height: "2rem"}, 1000);
    $('.progress_checkout').text('&nbsp;');
    $('.progress_checkout').animate({opacity: 0}, 800);
}

动画不宽松

2 个答案: