添加具有基本背景颜色的对象，然后将其更改为延迟的其他颜色

Question

我有一个ul。使用javascript我将li添加到它。我需要添加背景颜色为＃E4F3D6的li，然后10秒后更改为#DDD作为最终颜色。

我知道动画和转换延迟是可能的，但我不知道如何。

我写了这个但是没有正常工作：

#define N 100               
typedef int semaphore;
semaphore mutex = 1;
semaphore empty = N;
semaphore full = 0;
void producer(void)
{
    int item;
    while (TRUE)
    {
        produce_item(&item);
        down(&empty);
        down(&mutex);
        enter_item(item);
        up(&mutex);
        up(&full);
    }
}
void consumer(void)
{
    int item;
    while (TRUE)
    {
        down(&full);
        down(&mutex);
        remove_item(&item);
        up(&mutex);
        up(&empty);
        consume_item(item);
    }
}

这是一个演示：https://jsfiddle.net/junihh/a657pd6q/4/

请有人帮助我。

Answer 1

在CSS中为元素本身设置transition-delay属性：

.test {
  height: 25px;
  background-color: #E4F3D6;
  -webkit-animation: change-color 2s ease 5s forwards;
  -moz-animation: change-color 2s ease 5s forwards;
  animation: change-color 2s ease 5s forwards;
}

以上使用animation属性的简写替代方法：

animation: <animation-name> <animation-duration> <animation-type> <animation-duration> <animation-fill-mode>

animation-delay属性正如其名称所暗示的那样，它将动画的开始延迟指定的值（此处5s，五秒钟）;动画完成后，animation-fill-mode属性会使动画的最终值保持不变：

document.getElementById('add').addEventListener('click', function() {
  var li = document.createElement('li');
  li.innerHTML = '<div class="test"></div>';
  document.getElementById('container').appendChild(li);
}, false);

* {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
#container {
  width: 200px;
  margin: 20px auto 0;
  padding: 15px;
  background-color: #FFF;
  border: solid 1px #DDD;
}
#container li {
  background-color: #DDD;
  margin-bottom: 4px;
}
#container li:last-child {
  margin-bottom: 0;
}
.button-box {
  margin: 20px auto 0;
  width: 100px;
}
#add {
  width: 100%;
  padding: 10px 0;
  background-color: #666;
  cursor: pointer;
  font-size: 14px;
  color: #FFF;
}
#add:active {
  background-color: #333;
}
@-webkit-keyframes change-color {
  0% {
    background-color: #E4F3D6;
  }
  100% {
    background-color: #F90;
  }
}
@-moz-keyframes change-color {
  0% {
    background-color: #E4F3D6;
  }
  100% {
    background-color: #F90;
  }
}
@keyframes change-color {
  0% {
    background-color: #E4F3D6;
  }
  100% {
    background-color: #F90;
  }
}
.test {
  height: 25px;
  background-color: #E4F3D6;
  -webkit-animation: change-color 2s ease 5s forwards;
  -moz-animation: change-color 2s ease 5s forwards;
  animation: change-color 2s ease 5s forwards;
}

<ul id="container">
  <!-- li's -->
</ul>

<div class="button-box">
  <button type="button" id="add">Add row</button>
</div>

JS Fiddle demo

请注意，在演示中，我使用#f90的最终颜色而不是#ddd，只是为了让动画更加明显（开始和结束颜色之间的区别，否则，是很容易错过。