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

Question

我有以下进度条计（下）。

当我将活动 class 添加到其中一个 div 时，我希望较深的橙色从左到右进行动画处理。当前的 html/css 结构是否可行？

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

.progress-bar-item.active {
  opacity: 1;
}

<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>

Answer 1

当然，您可以使用 CSS transition 属性为活动 class 的外观添加动画效果，例如

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

这是加载页面的示例，稍等片刻，添加 class 并在两秒内淡化活动 class（请注意 jQuery 仅在此处使用添加 class).

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

.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;
}

<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>

Answer 2

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

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

.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>

这里是我将 class 添加到所有项目的示例：

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 3

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

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

Is it possible to animate a DIV's background color opacity?

html

css

opacity

css-animations