Question

我正在尝试创建一个简单的进度条，它会向我显示进度条转换中的动画。我正在尝试使用css过渡属性，但无法实现转换。

＆＃13;

.progress-bar_wrapper {
  width: 100%;
  height: 20px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.progress-bar {
  background: blue;
  width: 0%;
  height: 20px;
  transition-property: width;
  transition-duration: 20s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

＆＃13;

<div class="progress-bar_wrapper">
  <div class="progress-bar" style="width:60%">
  </div>
</div>

＆＃13;

Answer 1

一种选择是删除内联宽度样式并在不同级别切换类。

您也可以切换宽度。

＆＃13;

$('#btn').click(()=>{

  $(".progress-bar").toggleClass('progress-bar-70 progress-bar ');
});

＆＃13;

.progress-bar_wrapper {
  width: 100%;
  height: 20px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.progress-bar {
  background: blue;
  width: 0%;
  height: 20px;
  transition-property: width;
  transition-duration: 20s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

.progress-bar-70 {
  background: blue;
  width: 70%;
  height: 20px;
  transition-property: width;
  transition-duration: 20s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar_wrapper">
  <div class="progress-bar">
  </div>
</div>

<button id="btn">toggle</button>

＆＃13;

Answer 2

那是因为你没有在＆＃34;州之间转换＆＃34;首次加载页面时，只需在页面加载时使用内联样式覆盖宽度。如果您希望进度条显示动画状态，请改为使用CSS动画：

.progress-bar {
  background: blue;
  height: 20px;
  animation: load 20s linear 1s;
  animation-fill-mode: forwards;
  width: 0%;
}

@keyframes load {
    from { width: 0%; }
    to   { width: 60%; }
}

概念验证示例：

＆＃13;

.progress-bar_wrapper {
  width: 100%;
  height: 20px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.progress-bar {
  background: blue;
  height: 20px;
  animation: load 20s linear 1s;
  animation-fill-mode: forwards;
  width: 0%;
}

@-webkit-keyframes load {
  from {
    width: 0%;
  }
  to {
    width: 60%;
  }
}

@keyframes load {
  from {
    width: 0%;
  }
  to {
    width: 60%;
  }
}

＆＃13;

<div class="progress-bar_wrapper">
  <div class="progress-bar">
  </div>
</div>

＆＃13;

或者，您可以使用基于JS的方法来触发宽度变化。但是，这应该被认为是最后的努力，因为你真正要做的是使用CSS动画而不是:)除非你也想支持那些不能识别它的浏览器。

＆＃13;

window.setTimeout(function() {
  document.querySelector('.progress-bar').style.width = '60%';
}, 1000);

＆＃13;

.progress-bar_wrapper {
  width: 100%;
  height: 20px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.progress-bar {
  background: blue;
  width: 0%;
  height: 20px;
  transition-property: width;
  transition-duration: 20s;
  transition-timing-function: linear;
}

＆＃13;

<div class="progress-bar_wrapper">
  <div class="progress-bar">
  </div>
</div>

＆＃13;

Answer 3

您的内联样式取代了您在CSS中设置的零百分比宽度。您可以看到如何将宽度从零更改为某个值（在本例中使用vanilla JavaScript），使转换发生：

＆＃13;

setTimeout(function() {
  document.querySelector('.progress-bar').style.width = '60%';
}, 0)

＆＃13;

.progress-bar_wrapper {
  width: 100%;
  height: 20px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.progress-bar {
  background: blue;
  width: 0%;
  height: 20px;
  transition-property: width;
  transition-duration: 20s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

＆＃13;

<div class="progress-bar_wrapper">
  <div class="progress-bar">
  </div>
</div>

＆＃13;

Answer 4

您可以使用CSS3动画来实现您的要求。

.wrapper{
				float:left;
				width:100%;
				height:30px;
				border:1px solid #000;
			}
			.inner_wrapper{
				float:left;
				width:0%;
				height:30px;
				background: #ff6600;
				animation-name:progress;
				animation-delay: 1s;
				animation-timing-function: linear;
				animation-duration: 5s;
				animation-iteration-count:1;
				animation-fill-mode: forwards;
				-webkit-animation-name:progress;
				-webkit-animation-delay: 1s;
				-webkit-animation-timing-function: linear;
				-webkit-animation-duration: 5s;
				-webkit-animation-iteration-count:1;
				-webkit-animation-fill-mode: forwards;
			}
			@keyframes progress{
				0%{
					width:0%;
				}
				100%{
					width:60%;
				}
			}
			@-webkit-keyframes progress{
				0%{
					width:0%;
				}
				100%{
					width:60%;
				}
			}

<div class="wrapper">
  <div class="inner_wrapper">
  </div>
</div>

Answer 5

试试这个：

Html：

  <div class="progress-bar_wrapper">
      <div class="progress-bar">

      </div>
  </div>

的CSS：

  .progress-bar_wrapper{
       width:100%;
        height:20px;
        background:rgba(0,0,0,0.05);
        border:1px solid rgba(0,0,0,0.2);
  }
 .progress-bar { 
    background: blue; 
    width: 50%;  
    height: 20px; 
    webkit-transition: 20s width linear 1s;
    transition: 20s width linear 1s;
  }

  .progress-bar:hover{
     width: 0%;
   }

简单转换不适用于进度条

5 个答案: