背景颜色的 CSS 过渡

Question

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

#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');
});

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

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();
});

还有你更新的 fiddle :https://jsfiddle.net/aqw4cbss/3/