CSS3 затухает в липком меню

Хорошо, поэтому я пытаюсь сделать это довольно просто (надеюсь).

Я использую плагин wordpress для своего меню и расширение, чтобы сделать его липким. Мое меню уже не наверху, оно находится ниже другого контейнера, поэтому оно становится липким, когда контейнер меню достигает вершины экрана браузера (как и должно быть).

У меня есть пункт меню, который скрыт, когда меню "не липкое", а затем становится видимым, когда оно "липкое". Все работает отлично, однако теперь я хочу добавить эффект затухания, предпочтительно только с использованием CSS3 (для простоты интеграции). Таким образом, эффект затухания должен иметь место, когда видимость становится видимой (см. Код ниже, но в основном, когда меню становится липким)

Мой пользовательский класс для элемента меню ".jrm-um-sticky-only". Вот мой код для достижения отображаемого/исчезающего пункта меню:

#megaMenu ul.megaMenu li.jrm-um-sticky-only{ 
display: block !important;
visibility: hidden !important;
opacity: 0 !important;
}

#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky li.jrm-um-sticky-only{ 
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

Я попытался добавить: -webkit-transition: visibility 0.2s linear, opacity 0.2s linear; -moz-transition: visibility 0.2s linear, opacity 0.2s linear; -o-transition: visibility 0.2s linear, opacity 0.2s linear;

к последнему селектору выше (где непрозрачность равна 1), но это не сработало. Я также попытался установить непрозрачность 0 вместе с вышеуказанным кодом перехода, но не помогло.

Я новичок, так жаль, если в моем подходе есть ошибки. (не уверен, нужна ли мне прозрачность в 0, если видимость скрыта???)

Благодарю!!!!

1 ответ

Может быть, вы должны добавить свои правила перехода к первому блоку (#megaMenu ul.megaMenu li.jrm-um-sticky-only)

licensed under cc by-sa 3.0 with attribution.