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

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转到{{1只有one转换。但高度没有。
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; 
}

<强> Fiddle