Question

我正在为我的设备规格页面构建排名/分数栏，我有一个使用transition和animation的基本动画，但最终的结果并不完全是什么我是在追求。为了您的选择，CSS代码保留在原位（已禁用animation属性）和this is currently how it stands - JSFiddle of the same thing。

A previous question of mine是为了让动画工作，具体取决于条形图的百分比，我当前使用的方法来自该问题中的选定答案。不幸的是，最终的结果虽然不错，却没有提供我最初的功能。

例如，就像当前一样，当页面加载时会提供特定的背景颜色，然后过渡。

我理想情况下，在我的CSS中启用animation属性后得到的结果，但同样存在问题。它更接近我的目标，但不是解决方案。

我正在寻找的是这样的（希望我已经解释得这么好了）。所有这些对背景颜色的更改都应该在转换（宽度）发生时发生。

当width等于0％至24％时，背景颜色应为红色，因此条形图将以红色开始 - #a41818
如果width等于25％至49％，背景颜色应从红色变为橙色 - #87581c
如果width等于50％至74％，背景颜色应从橙色渐变为黄色 - #997815
如果width等于75％至89％，背景颜色应从黄色渐变为绿色 - #659a1f
如果width等于25％至49％，背景颜色应从绿色渐变为绿色 - #3a8d24

而且，如果宽度恰好保持在特定的百分比，例如56％，则条形背景颜色应保持与其百分比范围相对应的颜色。在这种情况下，56％将是黄色。如果条形宽度为12％，则颜色应保持红色等。

如果您需要更多详细信息，或者您需要进一步澄清任何内容，请告诉我。

谢谢！

Answer 1

如果我理解正确，您只想根据动画制作时的百分比来设置颜色动画。这是对的吗？

如果是这样，并且基于您在示例中提供的内容，我建议您查看jQuery的animate函数并使用step回调来检查动画中每一步的方式

到目前为止，我已经尝试过将css和jquery结合起来。我很想看到一个完整的CSS示例！

jQuery

// wrap this in an anonymous to help namespace collisions
// and to help with faster variable lookup.
;(function (document, $) {

    $(document).ready(function () {
        $('.rating-bar').each(function () {
            var _this = $(this),
                size = _this.data('size');

            _this.animate({
                width: size + '%'
            }, {
                duration: 2500,
                step: function (progress) {
                    _this.css({
                        backgroundColor: progressColor(progress)
                    });
                }
            });
        });
    });

    function progressColor(progress) {
        if (progress >= 0 && progress <= 24) return '#a41818';
        else if (progress >= 25 && progress <= 49) return '#87581c';
        else if (progress >= 50 && progress <= 74) return '#997815';
        else if (progress >= 75 && progress <= 89) return '#659a1f';
        else if (progress >= 90 && progress <= 100) return '#659a1f';
    }
})(document, jQuery);

更新后的css

#rank-bar {
    margin: 1em 0 2em 0;
}
#rank-bar-score {
    display: inline-block;
}
#ranks-js {
    margin-bottom: 1.5em;
}
.rating-bar {
    width: 0;
    line-height: 2;
    background-color: #1a1a1a;
    outline: none;
    -moz-border-radius: 2px 0 0 2px;
    -webkit-border-radius: 2px 0 0 2px;
    border-radius: 2px 0 0 2px;
    -moz-transition: background-color 0.5s linear 0s;
    -webkit-transition: background-color 0.5s linear 0s;
    transition: background-color 0.5s linear 0s;
}
.rating-bar-bg {
    width: auto;
    background-color: #1a1a1a;
    margin: 0.5em 0 0 1em;
    border: 1px solid #090909;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.rating-bar-bg-overall {
    width: auto;
    background-color: #1a1a1a;
    margin: 0.5em 0;
    border: 1px solid #090909;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.rb-label {
    width: 10em;
    max-width: 350px;
    display: block;
    color: #ebebeb;
    font-weight: bold;
    text-shadow: 2px 1px 0 #222222;
    text-transform: uppercase;
    margin-left: 0.5em;
}
#overall {
    font-size: 1.25em;
}

JSFiddle

编辑：我已经从小提琴中添加了更新后的CSS。

编辑2 ：有关简单示例，请参阅此JSFiddle。

Answer 2

另一种解决方法。

用CSS完成动画，脚本只是为了处理何时停止。

脚本

var intervalFunc;
var containerWidth;
var stopAt;

$(document).ready(function() {


$("#run").click(function() {
    containerWidth = $("#container").width();
    entered = $("#value").val();
    stopAt = containerWidth * entered / 100; 
    $("#test").removeClass ("animated");
    intervalFunc = setInterval (Stop, 10);
    setTimeout (Start, 10);
});

})

function Start () {
    $("#test").addClass ("animated");
    $("#test").removeAttr("style");

}

function Stop () {
    var elem = document.getElementById('test');
    var style = window.getComputedStyle (elem, null);
    var frame = style.getPropertyValue("width");
    var width = parseInt(frame,10);
    if (width > stopAt) {
        elem.style.webkitAnimationPlayState = "paused";
        clearInterval (intervalFunc);
    }
}

CSS

#container {
    position: absolute;
    height: 50px;
    width: 300px;
    border: solid 1px black;
    display: block;
    top: 40px;
}

#test {
    position: absolute;
    height: 100%;
    width: 0px;
    display: block;
    top: 0px;
    left: 0px;
}

.animated {
    -webkit-animation-name: colors;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

#run {
    width: 40px;
    height: 25px;
}

@-webkit-keyframes colors
{
    0% {width: 0%; background-color: red;}
   30% {           background-color: red;}
   50% {           background-color: yellow;}
  100% {width: 100%; background-color: green;}
}

demo

在演示中，输入条形图的百分比，然后按“运行”。

仅限webkit动画，但应轻松扩展到其他浏览器。

颜色停止只是近似，但也可以很容易地修改。

jQuery - 动画backgroundColor，取决于宽度百分比

2 个答案:

demo