背景颜色上的CSS过渡

Question

我有一个div的背景色和css过渡

#foo {
    background-color:rgba(255,0,0,0.9);
    -webkit-transition: all 3000ms ease;
    -moz-transition: all 3000ms ease;
    -o-transition: all 3000ms ease;
    transition: all 3000ms ease;
}

我也有一个按钮。当按钮被点击时，我想

1. 立即将div切换为透明背景和最终高度
2. 仅在background-color属性上创建渐入效果

为了实现这一点，我为div 创建了一些类。

#foo.transparent {
    background-color:transparent; 
}
#foo.final {
    background-color:rgba(255,0,0,0.9); 
    height:400px;
}

，然后用jQuery应用到div上，点击

$('#start').click(function() {
    $('#foo').addClass('transparent').addClass('final');
});

不幸的是，高度立即切换到最终值(这是正确的)，但背景颜色没有执行从透明到最终值的必要过渡。我错过了什么?(小提琴)

Answer 1

我认为一个更简单的解决方案可能是使用jQuery的fadeIn()效果，像这样:

Html:

<button id="start">start animation</button>
<div id="foo">some content</div>

CSS:

#foo {
background-color:rgba(255,0,0,0.9);
}
#foo.final {
    height:400px
}

JQuery:

$('#start').click(function() {
    console.log('click');
    $('#foo').addClass('final').hide().fadeIn();
});

和您更新的小提琴:https://jsfiddle.net/aqw4cbss/3/

Answer 2

height是不可动画的。使用min-height &&max-height代替。再加上你的初始状态和最终状态的背景是相同的，所以它如何从2 = state转换。

jsfiddle

Answer 3

我认为你应该看看JQuery的.animate和.css函数。

$('#foo').css("opacity", "0");
$('#foo').animate({backgroundColor: "green"}, 500);

注意:你应该在CSS中指定一个默认的背景色和不透明度。

编辑:你需要JQuery的颜色插件，以使这个工作(它是非常小。)https://github.com/jquery/jquery-color