Question

我有以下进度条表（下方）。

当我将活动类添加到其中一个div时，我希望从较暗的橙色动画从左到右。这是否可以使用当前的html / css结构？

＆＃13;

.progress-bar-item {
  opacity: .1;
  background-color: orange;
  height: 10px;
  width: 100px;
  float: left;
  margin-right: 10px;
}

.progress-bar-item.active {
  opacity: 1;
}

＆＃13;

<div class="progress-bar-item active"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>

＆＃13;

Answer 1

您可以使用多个背景。一个用于浅橙色，另一个用于深橙色，使用线性渐变。然后，在添加active类时，更改渐变的大小，使其高于浅色。像这样你将创建从左到右的不透明度动画（你也可以从右到左，甚至考虑上/下）。

这是一个例子（将鼠标悬停在元素上以查看颜色变化。

.progress-bar-item {
  background:
  linear-gradient(to right,orange,orange) 0 0/0 100% no-repeat,
  rgba(255, 165, 0,0.1);
  height: 40px;
  width: 300px;
  float: left;
  margin-right: 10px;
  transition:.5s;
}

.progress-bar-item:hover {
  background-size:100% 100%,auto;
}

<div class="progress-bar-item"></div>

以下是我将类添加到所有项目的示例：

var i = 0;
var update = function() {
  $('.progress-bar-item').eq(i).addClass('active');
  i++;
  if (i < 4)
    setTimeout(function() {
      update()
    }, 1000);
}
setTimeout(function() {
  update()
}, 1000);

.progress-bar-item {
  background-image: linear-gradient(to right, orange, orange);
  background-color:rgba(255, 165, 0, 0.1);
  background-size:0 100%;
  background-repeat:no-repeat;
  height: 20px;
  width: 100px;
  float: left;
  margin-right: 10px;
  transition: 1s;
}

.progress-bar-item.active {
  background-size: 100% 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>

Answer 2

当然，您可以使用CSS transition属性为活动类的外观设置动画，例如

.progress-bar-item.active {
  opacity: 1;
  transition: 2s all;
}

这是一个加载页面，等待一秒，添加类并在两秒钟内淡化活动类的示例（请注意，此处仅使用jQuery来添加类）。

＆＃13;

setTimeout(function() {
  $('.active:last').next().addClass('active')
}, 1000)
setTimeout(function() {
  $('.active:last').next().addClass('active')
}, 2000)

＆＃13;

.progress-bar-item {
  opacity: .1;
  background-color: orange;
  height: 10px;
  width: 100px;
  float: left;
  margin-right: 10px;
}

.progress-bar-item.active {
  opacity: 1;
  transition: 2s all;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-bar-item active"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>
<div class="progress-bar-item"></div>

＆＃13;

Answer 3

对于任何CSS属性转换，您将使用transition来实现此目的。您可以consult the documentation获得更好的解释，但只需将transition: opacity .3s添加到基类中，然后任何其他修改（添加活动）都会导致从.1转换到新的不透明度。

是否可以为DIV的背景颜色不透明度制作动画？

3 个答案: