переход webkit, похоже, не работает в некоторых правилах box-shadow

Я хочу расширяемое дерево в ячейке таблицы. Я заставил это работать. Играя с ним, я попытался добавить тень коробки с переходом. Это работает только на корневом уровне. (JsFiddle).

Проблема может быть связана с неработающими переходами на дисплее (link). Но сбивает ли отображение все переходы, или я что-то упускаю? (Я добавил только переход через webkit.)

Спасибо.


css css-transitions
person RussAbbott    schedule 17.07.2012    source источник
comment
afaik box-shadow-transitions официально не поддерживается. И не может быть разумного перехода между display состояниями.   -  person amon    schedule 17.07.2012

Ответы (1)


arrow_upward
1
arrow_downward

Изменить: это может быть возможным обходным путем, поскольку эффект перехода не работает.

Вы пробовали использовать анимацию по ключевым кадрам? Я сделал некоторые изменения в коде. Вот демонстрация (jsFiddle).

Я изменил:

/* This transition seems to have no effect. */
    -webkit-transition: box-shadow 0.5s;
}

to:

/* This transition seems to have no effect. */
    -webkit-animation: shadow 0.5s ease-in-out;
}  

@-webkit-keyframes shadow {
    0%   { box-shadow: 0px 0px 0px #000; }    
    100% { box-shadow: 4px 4px 7px #000; }
}
person Christofer Vilander    schedule 17.07.2012
comment
Спасибо за предложение. Меня очень интересует, почему переход не сработал. - person RussAbbott; 18.07.2012