html - .active 类在 Bootstrap 3 进度条和加载动画中不起作用

Question

我知道关于引导进度条的活动类的问题很少，但我找不到可以帮助我的答案（css + bar）
我在引导程序 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 的问题，但我不知道如何解决它......有
什么建议吗？

标签： htmlcsstwitter-bootstrap-3progress-bar

Answer 1

问题是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>