我正在尝试在分组进度条中添加动画,该动画会将每个进度条从 0 加载到其值。例如,在下面的示例代码中,我想首先加载红色进度条,然后加载绿色进度条。我怎样才能做到这一点?
请检查this jsfiddle中的代码.
html:
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
CSS:
.progress-bar-outer {
width: 300px;
height: 40px;
flex: auto;
display: flex;
flex-direction: row;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 75%;
height: 100%;
background-color: red;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 50%;
height: 100%;
background-color: green;
}
.progress-bar-outer div {
animation:loadbar 3s;
-webkit-animation:loadbar 3s;
}
@keyframes loadbar {
0% {width: 0%;left:0;right:0}
}
最佳答案
为了获得更好的性能,我会转换transform
。使用 translateX(-100%)
和 opacity: 0
将它们移动到默认的隐藏位置,然后设置动画到 translateX(0); opacity: 1;
将它们放置到位。只需将 animation-delay
添加到与 animation-duration
我将条形设置为半透明,以便在动画触发时显示。
.progress-bar-outer {
width: 300px;
height: 40px;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
display: flex;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 75%;
background-color: red;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: green;
}
.progress-bar-outer div {
transform: translateX(-100%);
animation: loadbar 3s forwards;
-webkit-animation: loadbar 3s forwards;
opacity: 0;
}
.progress-bar-outer .progress-bar-inner2 {
animation-delay: 3s;
}
@keyframes loadbar {
0% {
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress -->
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
关于javascript - 在多个进度条动画中将每个进度条从 0 加载到其值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45147799/