主页 / 问题 / 1213536
Accepted
Node_pro
Asked:2021-12-03 21:34:48 +0000 UTC2021-12-03 21:34:48 +0000 UTC

如何动画进度条？

  • 772

有一个progressBar 组件。进度数据取自数据库。JS不推荐使用。

任务是使动画width从 0 变为当前值（写在 style 属性中）。

每个进度的生成keyframes- 不太适合。我还想使用一个具有空值的类，当页面加载时，将其删除并使用transition. 现在我用max-width. 动画宽度：0->100%，除了动画速度，一切正常。更准确地说，它们是相同的。

实际上问题是：有没有办法做得更好？谢谢大家！

.progress-bar{
  width: 500px;
  height: 2px;
  background: #aaa;
  margin: 10px 0; 
}

.progress-bar .progress{
  background: #f00;
  width:100%;
  height: 100%;
  animation: width100 2s backwards;
}

@keyframes width100{
  0% {
    width: 0
  }
  100%{
    width: 100%;
  }
}
   <div class='progress-bar'>
       <div class='progress' style='max-width: 75%'></div>
    </div>
    
     <div class='progress-bar'>
       <div class='progress' style='max-width: 50%'></div>
    </div>
    
    <div class='progress-bar'>
       <div class='progress' style='max-width: 20%'></div>
    </div>

css

2 个回答

  1. Best Answer

    使用 css 变量，您不必更改动画（您甚至可以通过 js 更改元素的 css 变量）
    我还决定动画 not width, but transform，这是用于动画

    .progress-bar {
  width: 500px;
  height: 2px;
  background: #aaa;
  margin: 10px 0;
}

.progress-bar .progress {
  --time: 1s; /** Значение по умолчанию для времени анимации **/
  background: #f00;
  width: 100%;
  height: 100%;
  transform-origin: left top;
  transform: scaleX(0);
  animation: scale var(--time) forwards;
}

@keyframes scale {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
    <div class='progress-bar'>
  <div class='progress' style='max-width: 75%; --time: 10s'></div>
</div>

<div class='progress-bar'>
  <div class='progress' style='max-width: 50%; --time: 2s'></div>
</div>

<div class='progress-bar'>
  <div class='progress' style='max-width: 20%; --time: 1s'></div>
</div>

    带颜色：
    CSS变量变魔术，可以根据CSS规则继承

    .progress-bar {
  width: 500px;
  height: 2px;
  background: #aaa;
  margin: 10px 0;
}

.progress-bar .progress {
  --time: 1s; /** Значение по умолчанию для времени анимации **/
  background-color: #f00;
  --colorBar: #f00; /** Значение по умолчанию для конечного цвета **/
  width: 100%; 
  height: 100%;
  transform-origin: left top;
  transform: scaleX(0);
  animation: scale var(--time) forwards;
}

@keyframes scale {
  0% {
    transform: scaleX(0);
  }
  100% {
    background-color: var(--colorBar);
    transform: scaleX(1);
  }
}
    <div class='progress-bar'>
  <div class='progress' style='max-width: 75%; --time: 3s; --colorBar: black;'></div>
</div>

<div class='progress-bar'>
  <div class='progress' style='max-width: 50%; --time: 2s; --colorBar: yellow;'></div>
</div>

<div class='progress-bar'>
  <div class='progress' style='max-width: 20%; --time: 1s;'></div>
</div>

    • 2

  2. 需要设置不同的动画速度。

    这里（为清楚起见，每个人都设置了相同的最大宽度）：

    .progress-bar {
  width: 500px;
  height: 2px;
  background: #aaa;
  margin: 10px 0;
}

.progress-bar .progress {
  background: #f00;
  width: 100%;
  height: 100%;
}

.progress-bar .progress.fast   {animation: width100 1s backwards;}
.progress-bar .progress.medium {animation: width100 4s backwards;}
.progress-bar .progress.slow   {animation: width100 10s backwards;}

@keyframes width100 {
  0% {
    width: 0
  }
  100% {
    width: 100%;
  }
}
    <div class='progress-bar'>
  <div class='progress fast' style='max-width: 75%'></div>
</div>

<div class='progress-bar'>
  <div class='progress medium' style='max-width: 75%'></div>
</div>

<div class='progress-bar'>
  <div class='progress slow' style='max-width: 75%'></div>
</div>

    • 0

相关问题