javascript - 如何使用延迟效果过渡不同的背景颜色

Question

我正在创建一系列转换/动画，因此对于这个特定示例，我需要一个 javascript 解决方案，而不是一个 css 关键帧解决方案。

我在很多不同的序列中使用了延迟，并且我正在尝试对新的背景颜色执行相同的操作，但由于某些原因，使用 addClass 函数对我不起作用。

为什么这对我不起作用？

//$(".blue").delay(2500).addClass("green-fill");
$(".green-fill").delay(2500).addClass("green-fill");

.blue {
	background-color: #0085A1;
	width: 100%;
	height: 100vh;
	position: relative;
	text-align: center;
}
.green-fill {
	display: none;
	background: green;
	width: 100%;
	height: 100vh;
	position: relative;
	text-align: center;
	z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue">
   <div class="green-fill">
   Hello
	</div>
</div>

Answer 1

CSS

.green-fill {
    background: green;
    width: 100%;
    height: 100vh;
    position: relative;
    text-align: center;
    z-index: 1;

    transition:background-color 1s;
}
.green-fill.blue{
    background-color:#00f;
}

jQuery

setTimeout(function(){
    $(".green-fill").addClass("blue");
},2500);

// That's why css keyframes are better...
// For smooth ease back : the trick is to copy the color being rendered, then remove class, and then finally remove the inline generated code.

setTimeout(function(){
    var $gb = $(".green-fill");
    var color = $gb.css("background-color");
    $gb.css("background-color",color).removeClass("blue").css("background-color","");

  },5000);