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

我也有一个按钮。点击按钮后，我想

立即将div切换为透明背景和最终高度
仅在background-color属性

为实现这一目标，我为div创建了一些类

#foo.transparent {
    background-color:transparent; 
}

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

并使用jQuery点击

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

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

Answer 1

我认为更简单的解决方案可能是使用jQuery的href效果，如下所示：

HTML：

fadeIn()

CSS：

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

JQuery的：

#foo {
background-color:rgba(255,0,0,0.9);
}

#foo.final {
    height:400px
}

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

Answer 2

我认为您应该研究JQuery .animate和.css函数。

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

注意：您应该在css中指定默认的背景颜色和不透明度来转换。

编辑：您需要使用JQuery Color插件才能使其工作（它非常小。） https://github.com/jquery/jquery-color

Answer 3

身高不可动。使用min-height＆amp;＆amp;而是max-height。加上初始状态和最终状态的背景是相同的，那么它如何从2等于状态转换。

jsfiddle

背景颜色的CSS过渡

3 个答案: