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

我正在创建一系列过渡/动画，因此为此特定示例，我需要一个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>

最佳答案

的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);

关于javascript - 如何用延迟效果过渡不同的背景颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35377270/