Question

我是开发人员，而不是设计师，所以请对我轻松一点。我正在尝试创建进度条列表，但是动画无法对此进行处理。当页面到达元素位置时，我想将进度条缓慢运行到定义的宽度。这是我的HTML页面内容

<div class="container">
    <div class="row">
         <!-- Skill Bars -->
            <div class="progress-straight skill-bar ">
                <div class="progress-bar-straight progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                    <span class="skill">HTML <i class="val">100%</i></span>
                </div>
            </div>

            <div class="progress-straight skill-bar">
                <div class="progress-bar-straight progress-bar-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" >
                    <span class="skill">CSS<i class="val">90%</i></span>
                </div>
            </div>

            <div class="progress-straight skill-bar">
                <div class="progress-bar-straight progress-bar-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                    <span class="skill">JavaScript<i class="val">75%</i></span>
                </div>
            </div>  

            <div class="progress-straight skill-bar">
                <div class="progress-bar-straight progress-bar-danger" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">
                    <span class="skill">Photoshop<i class="val">55%</i></span>
                </div>
            </div>  

    </div>
</div>

CSS是

.progress-straight {
  height: 35px;

}
.progress-straight .skill {
  font: normal 12px "Open Sans Web";
  line-height: 35px;
  padding: 0;
  margin: 0 0 0 20px;
  text-transform: uppercase;
}
.progress-straight .skill .val {
  float: right;
  font-style: normal;
  margin: 0 20px 0 0;
}

.progress-bar-straight {
  text-align: left;
  transition-duration: 3s;
 transition: width 2s ease;
    -webkit-transition: width 0s ease;
    -o-transition: width 0s ease;
    -moz-transition: width 0s ease;
    -ms-transition: width 0s ease;
}

JavaScript代码是

<script>
    $(document).ready(function() {
        $('.progress-straight .progress-bar-straight').css("width",
                function() {
                    return $(this).attr("aria-valuenow") + "%";
                }
        )
    });
</script>

我也有一个jsfiddle here

谢谢。

Answer 1

您将过渡时间保持为0s。您需要为其提供一些时间和初始宽度。

$(document).ready(function() {
        $('.progress-straight .progress-bar-straight').css("width",
                function() {
                    return $(this).attr("aria-valuenow") + "%";
                }
        )
    });

.progress-straight {
  height: 35px;
  background: lightcoral;

}
.progress-straight .skill {
  font: normal 12px "Open Sans Web";
  line-height: 35px;
  padding: 0;
  margin: 0 0 0 20px;
  text-transform: uppercase;
}
.progress-straight .skill .val {
  float: right;
  font-style: normal;
  margin: 0 20px 0 0;
}

.progress-bar-straight {
  text-align: left;
  transition-duration: 3s;
 transition: width 2s ease;
    -webkit-transition: width 0s ease;
    -o-transition: width 0s ease;
    -moz-transition: width 1s ease;
    -ms-transition: width 0s ease;
        background: red;
    margin-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="row">
		 <!-- Skill Bars -->
            <div class="progress-straight skill-bar ">
                <div class="progress-bar-straight progress-bar-success" role="progressbar" style="width:33%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                    <span class="skill">HTML <i class="val">100%</i></span>
                </div>
            </div>
                
            <div class="progress-straight skill-bar">
                <div class="progress-bar-straight progress-bar-info" role="progressbar" style="width:33%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" >
                    <span class="skill">CSS<i class="val">90%</i></span>
                </div>
            </div>
            
            <div class="progress-straight skill-bar">
                <div class="progress-bar-straight progress-bar-warning" role="progressbar" style="width:33%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                    <span class="skill">JavaScript<i class="val">75%</i></span>
                </div>
            </div>  
            
            <div class="progress-straight skill-bar">
                <div class="progress-bar-straight progress-bar-danger" role="progressbar" style="width:33%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">
                    <span class="skill">Photoshop<i class="val">55%</i></span>
                </div>
            </div>  
            
	</div>
</div>

这是您更新的小提琴

如何使用CSS3创建进度条

1 个答案: