Скрипт: 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 для соответствия этому ограничению? Благодарю.
Попробуйте установить оба перехода в обоих правилах.
div.one{
background: red;
transition: height 0.5s, background 0.5s;
}
div.two{
background: green;
height: 200px;
transition: height 0.5s, background 0.5s;
}