我正在尝试使用 div
和 border-bottom
属性创建进度条。
我有两个类(class):
anim-start
:这使得进度条从 0% 到 70%
anim-end
:这使进度条变为 100%,并且他们移除了边框
我正在使用属性 animation-fill-mode: forwards
以便保留 css 属性。
问题是当我应用第二个类时,它会删除前面类的属性,因此进度条会消失。
请看下面的 fiddle :
var progress_bar = document.querySelector(".progress")
progress_bar.className = progress_bar.className + " anim-start";
setTimeout(function() {
progress_bar.className = progress_bar.className + " anim-end";
}, 3000);
.progress.anim-start {
animation-duration: 2s;
animation-name: progress-start-anim;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes progress-start-anim {
0% {
border-bottom: 5px solid #333;
width: 0%;
}
100% {
border-bottom: 5px solid #333;
width: 70%;
}
}
.progress.anim-end {
animation-duration: 2s;
animation-name: progress-end-anim;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes progress-end-anim {
99% {
width: 100%
}
100% {
border-bottom: none;
}
}
<div class="progress">
</div>
最佳答案
你可以让第二个动画从第一个动画结束的地方开始:
var progress_bar = document.querySelector(".progress")
progress_bar.className = progress_bar.className + " anim-start";
setTimeout(function() {
progress_bar.className = progress_bar.className + " anim-end";
}, 3000);
.progress.anim-start {
animation-duration: 2s;
animation-name: progress-start-anim;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes progress-start-anim {
0% {
border-bottom: 5px solid #333;
width: 0%;
}
100% {
border-bottom: 5px solid #333;
width: 70%;
}
}
.progress.anim-end {
animation-duration: 2s;
animation-name: progress-end-anim;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes progress-end-anim {
0% {
border-bottom: 5px solid #333;
width: 70%;
}
99% {
width: 100%
}
100% {
border-bottom: none;
}
}
<div class="progress">
</div>
您的版本不起作用的原因是您的第二个动画被第一个动画覆盖,并且您缺少第二个中的 border-bottom:
属性。
var progress_bar = document.querySelector(".progress")
progress_bar.className = progress_bar.className + " anim-start";
setTimeout(function() {
progress_bar.className = progress_bar.className + " anim-end";
}, 3000);
.progress.anim-start {
animation-duration: 2s;
animation-name: progress-start-anim;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes progress-start-anim {
0% {
border-bottom: 5px solid #333;
width: 0%;
}
100% {
border-bottom: 5px solid #333;
width: 70%;
}
}
.progress.anim-end {
animation-duration: 2s;
animation-name: progress-end-anim;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes progress-end-anim {
0% {
border-bottom: 5px solid #333;
/* */
}
99% {
width: 100%
}
100% {
border-bottom: none;
}
}
<div class="progress">
</div>
关于javascript - 在同一对象上添加第二个动画会删除 css 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34371489/