jquery - 单个元素上使用的类之间的转换属性的多个实例

Question

小提琴：http: //jsfiddle.net/X2s6W/

CSS：

div{
    background: green;
    width: 100px;
    height: 100px;
    transition: background 0.5s
}
div.one{
    background: red
}
div.two{
    height: 200px;
    transition: height 0.5s    
}

JS：

setInterval(function(){
    if($("div.one").length > 0){
        $("div").removeClass("one").addClass("two");
    }else{
        $("div.two").removeClass("two").addClass("one");
    }
}, 1000);

问题：

从one到two，只有height过渡，但背景没有。
当从two到 时one，只有background转换。但高度没有。
Chrome、Firefox 和 IE10 中的行为相同。

问题：有没有办法组合这些类，或者必须更改 CSS 以适应此限制？谢谢。

Answer 1

尝试在两个规则中设置转换。

div.one{
     background: red;
     transition: height 0.5s, background 0.5s; 
}
div.two{
    background: green;
    height: 200px;
    transition: height 0.5s, background 0.5s; 
}

小提琴