gpt4 book ai didi

javascript - 如何将关键帧的 0% css 设置为元素的当前 css 值?

转载 作者:搜寻专家 更新时间:2023-10-31 08:26:38 24 4
gpt4 key购买 nike

我正在尝试使用 CSS 动画制作进度指示器 div。请引用链接的 JSBin。我想要实现的行为是,当用户在 stage1 之后单击 stage3 时,div 宽度应该从当前的 30% 增加到 100%,而不是像现在这样从 0% 开始。我知道如果我将 0% 值设置为宽度:30%,我可以得到它。但如果我有很多阶段,它就不会那么好用。我希望动画从最后一个阶段的最终宽度开始到新阶段指定的宽度。

Progress indicator snippet

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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com