Почему переход в одном случае работает, а в другом - нет?

[Launder]

http://jsfiddle.net/Launder/vc73z30v/2/

 

С 82 строки закомментировано, если снять комментирование переход не работает. С 77 строки полностью аналогичная ситуация и всё работает.

Почему такое странное поведение? Как сделать чтоб оба перехода заработали?

Спасибо!

_{если кому нужно - код выложу сюда.}

Edited November 30, 2015 by Launder

[Igor Schnaider]

Потому что box-shadow там всегда стоит, состояний перехода нет.

// ul.list {#menu li:hover ul {

[Launder]

http://jsfiddle.net/Launder/vc73z30v/5/

 

всё, вроде, переделал, и, вроде всё видится ровненько, но смущает одно:

для тени, получается, для тега <li> свойство меняется в соответствии с функцией, а вот для ul.list к этой функции добавляется прозрачность.

Как же сделать так, чтоб тень ДЛЯ ВСЕГО МЕНЮ добавлялась с одинаковой динамикой?

PS При этом нужно помнить, что на данный момент задержка для тени сделана потому, что когда ul.list ещё не успел стать непрозрачным, когда сразу добавляешь тень для <li>, то она начинает просвечивать через ещё прозрачный ul.list, в результате чего, при переходе, внизу главного меню возникает полоса. Чтоб этого не было заметно, перед началом появления тени введена небольшая задержка (для похожих целей, при обратном переходе тень исчезает быстрее остальных функций).

Это я пояснил для того, чтоб было понимание, что простые решения тут врят ли подойдут. Нужно именно согласовать как-то изменение функции box-shadow c opacity, а как это сделать мне пока не вполне понятно...

Edited November 30, 2015 by Launder

[Launder]

Похоже, что в указанном примере, всё работает ровненько именно потому, что изменение тени происходит НЕЗАВИСИМО от изменения прозрачности остальных элементов. Почему так происходит - непонятно.

Ведь в случае задания свойства opacity: 0 тени видно не будет. Соответственно и при изменении прозрачности с нуля до единицы тень также должна менять прозрачность, то есть для неё должны работать две функциии, общее изменение прозрачности, а поверх неё - функция измения самой тени. Но она меняется буд-то бы для неё прозрачность сразу установили на единицу, а изменения отображения тени происходят только по той функции, котороую в transition установили для box-shadow.

ЗЫ: кстати свойство visibility, в сочетании с transition также работает интересно, сначала оно просто включается без задержки, а при выключении, задержка составляет всё время изменения, затем оно сразу становится скрытым. Это работает как бы по-умолчанию, и, если почему-то не работает эти параметры можно поставить их вручную. Постепенное нарастание/убываение происходит из-за изменения прозрачности. При этом, для ul.list меняется свойство opacity, а для главного меню, изменение цвета от прозрачного до нужного, происходит через задания измения свойства background  для тега <a>.

ЗЫЗЫ: а свойство transition нужно задавать одним правилом для свойства, то есть:  transition: all 1s ease, box-shadow .5s ease .5s - правильно, а вот два транзишна, один для всех, другой персонально для box-shadow - не получится.

Но при этом можно задавать разные transition для прямых и обратных изменений, например:

UL#menu > li    {        transition: all 1s ease, box-shadow .5s ease;      }UL#menu > li:hover    {        transition: all 1s ease, box-shadow .7s ease .3s;        }

ЗЫЗЫЗЫ: ну и к слову об актуальности темы - оказывается что свойство display не работает со свойством transition. Соответственно, приходится пользоваться свойством visibility совместно с opacity, если есть желание задать плавный переход.

 

[Int]

Display и visibility не имеют промежуточных числовых значений, которые могли бы меняться со временем. Скажем, половина между none и block — это сколько и как должно выглядеть? Так что логично, что они не работают с transition.

Если нужна прозрачность тени, смотри в rgba()

[Launder]

Display и visibility не имеют промежуточных числовых значений, которые могли бы меняться со временем. Скажем, половина между none и block — это сколько и как должно выглядеть?

 

Ну да, согласен. Но visibility при этом, включается сразу, а выключается только в конце функции перехода. За счёт этого, видимо, и появляется возможность использовать для самого перехода свойство opacity.

 

 

Так что логично, что они не работают с transition.

 

Логично. Только visibility можно использовать косвенно, через opacity, а через display плавный переход, похоже, вообще никак не подключишь.

 

 

Если нужна прозрачность тени, смотри в rgba()

 

Спасибо за наводку. Но в первом приближении, получается вообще интересно: мало того, что изменение отображения подменю происходит за счёт изменения свойства opacity, свойсво box-shadow должно по-идее накладываться сверху (Слава Богу, почему-то не накладывается). А если ещё добавить изменение прозрачности тени, то получится сразу наложение трёх функций opacity, box-shadow и изменения прозрачности в box-shadow. Можно, конечно, box-shadow включить по-умолчанию, а изменять, при выделении, прозрачность через альфа-канал. Наверное, стоит поэксперементировать.