我正在尝试使用 CSS 动画制作进度指示器 div。请引用链接的 JSBin。我想要实现的行为是，当用户在 stage1 之后单击 stage3 时，div 宽度应该从当前的 30% 增加到 100%，而不是像现在这样从 0% 开始。我知道如果我将 0% 值设置为宽度:30%，我可以得到它。但如果我有很多阶段，它就不会那么好用。我希望动画从最后一个阶段的最终宽度开始到新阶段指定的宽度。
document.getElementById('stage1').addEventListener('click', function() {
document.getElementById('progress').classList.add('stage1');
}, false);
document.getElementById('stage2').addEventListener('click', function() {
document.getElementById('progress').classList.add('stage2');
}, false);
document.getElementById('stage3').addEventListener('click', function() {
document.getElementById('progress').classList.add('stage3');
}, false);.progress-wrapper {
height: 10px;
width: 400px;
background-color: #BBDEFB;
}
#progress {
background-color: #AADE00;
height: 10px;
width: 0;
}
.stage1 {
animation-name: stage1;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes stage1 {
to {
width: 30%;
}
}
.stage2 {
animation-name: stage2;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes stage2 {
to {
width: 70%;
}
}
.stage3 {
animation-name: stage3;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes stage3 {
to {
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="progress-wrapper">
<div id="progress"></div>
</div>
<pre>
</pre>
<button id="stage1">stage1</button>
<button id="stage2">stage2</button>
<button id="stage3">stage3</button>
</body>
</html>最佳答案
我不知道只有 CSS 的解决方案，但您可以在添加类之前设置 progress 元素的 width。
在这样做时，它将从以前的宽度而不是从 0 过渡。
var progress = document.getElementById('progress');
document.getElementById('stage1').addEventListener('click', function() {
setPreviousWidth();
progress.classList.add('stage1');
}, false);
document.getElementById('stage2').addEventListener('click', function() {
setPreviousWidth();
progress.classList.add('stage2');
}, false);
document.getElementById('stage3').addEventListener('click', function() {
setPreviousWidth();
progress.classList.add('stage3');
}, false);
function setPreviousWidth () {
progress.style.width = progress.offsetWidth + 'px';
}.progress-wrapper {
height: 10px;
width: 400px;
background-color: #BBDEFB;
}
#progress {
background-color: #AADE00;
height: 10px;
width: 0;
}
.stage1 {
animation-name: stage1;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes stage1 {
to {
width: 30%;
}
}
.stage2 {
animation-name: stage2;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes stage2 {
to {
width: 70%;
}
}
.stage3 {
animation-name: stage3;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes stage3 {
to {
width: 100%;
}
}<div class="progress-wrapper">
<div id="progress"></div>
</div>
<pre>
</pre>
<button id="stage1">stage1</button>
<button id="stage2">stage2</button>
<button id="stage3">stage3</button>关于javascript - 如何将关键帧的 0% css 设置为元素的当前 css 值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33722487/