<分区>
<分区>
我知道关于 bootstrap progress bar 的 active class 的问题很少，但我找不到可以帮助我的答案(css + bar)
我在 bootstrap 3 中构建了一个进度条(条纹和事件)。我添加了一些 css 来为进度条设置动画(如加载条)，以一种很好的方式达到正确的值。如果我删除那个 css，那么进度条中的 .active 类就可以正常工作。
有没有办法让css和.active配合？
.progress-bar {
width: 0;
animation: progress 0.9s ease-in-out forwards;
}
.title {
opacity: 0;
animation: show 0.35s forwards ease-in-out 0.5s;
}
@keyframes progress {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="max-width: 80%">
<span class="title">80%</span>
</div>
</div>
如果您从片段中添加 .active 类，它就不起作用...我猜是 css 问题，但我不知道如何解决...
有什么建议吗？
最佳答案
问题是 active 类向 progress-bar 添加了一个动画，所以它覆盖了你的动画。
您可以将进度条包裹在一个 div 中。并将该 div 从宽度 0 设置为 100% 的动画。所以动画在 2 个不同的元素上并且不重叠。
见下文
.wrap {
width: 0;
animation: progress 0.9s ease-in-out forwards;
}
.title {
opacity: 0;
animation: show 0.35s forwards ease-in-out 0.5s;
}
@keyframes progress {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="progress">
<div class="wrap">
<div class="progress-bar progress-bar-striped active " role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="title">80%</span>
</div>
</div>
</div>关于html - .active 类在 Bootstrap 3 进度条和加载动画中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57787084/