Несколько экземпляров свойства перехода среди классов, используемых в одном элементе

Question

Несколько экземпляров свойства перехода среди классов, используемых в одном элементе

0

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 для соответствия этому ограничению? Благодарю.

Mooseman 21 сен. 2013, в 21:53

Источник

Теги:

jquery

html

css

css3

css-transitions

1 ответ

Ещё вопросы

PSL · Accepted Answer · 2013-09-21T16-45-00.000Z

Попробуйте установить оба перехода в обоих правилах.

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

скрипка