-Вебкит-переход с дисплеем - PullRequest
Новая
       8

-Вебкит-переход с дисплеем

19 голосов
/ 14 ноября 2010

Есть ли способ использовать -webkit-transition с display?

Я использую CSS display, чтобы скрыть и показать навигацию второго уровня ... но только display: none и display: block вкл.:hover немного не сексуально ... ease было бы здорово (например, -webkit-transition: display 300ms ease-in;)

Я знаю, что это довольно легко сделать с помощью jQuery, но в настоящее время я пытаюсь настроить все сCSS3 (я знаю: не все браузеры поддерживают его, но это не имеет значения для этого проекта, над которым я сейчас работаю)

вот код и структура: (li.menu1 имеет :hover с section.nav-menu1 {display: block;}) 

<ul>
    <li class="menu1"><a href="#">Menu 1</a>
        <section class="nav-menu1">
            <h1 class="none">Level 2 Overlay</h1>
            <nav>
                <h2 class="none">Menu 1 Navigation</h2>
                <ul>
                    <li><a href="#">Menu 1 Level 2-1</a></li>
                    <li><a href="#">Menu 1 Level 2-2</a></li>
                    <li><a href="#">Menu 1 Level 2-3</a></li>
                </ul>
            </nav>
        </section>
    </li>
</ul>

Ответы [ 4 ]

19 голосов
/ 08 марта 2011

Так что я не уверен, что вижу все части, собранные здесь.Вы хотите анимировать непрозрачность и видимость, с видимостью, имеющей задержку, поэтому непрозрачность выполняется до того, как она сработает; 

opacity: 0;
-moz-transition: opacity .25s linear, visibility .1s linear .5s;
-webkit-transition: opacity .25s linear, visibility .1s linear .5s;
-o-transition: opacity .25s linear, visibility .1s linear .5s;
transition: opacity .25s linear, visibility .1s linear .5s;
visibility: hidden;

до 

opacity: 1;
visibility: visible;

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

13 голосов
/ 15 ноября 2010

Вы должны использовать переход height или width, чтобы показать и скрыть меню второго уровня. Display свойство не поддерживается переходами.

Есть статья на ODC с чем-то похожим на ваши потребности. Кроме того, я изменил его немного , чтобы он больше походил на пункт меню. Прекрасно работает в Opera 10.7, без переходов в Firefox 3.6.12 и совсем не работает в Chrome 7.0.517.41.

Надеюсь, это будет полезно в качестве начальной точки для вашего собственного анимированного меню.

Обновление 1: Ваше меню с легкими переходами . Возможно, у меня что-то не так с его структурой. Проблема в том, что переходы не работают с auto, поэтому вы должны вручную указать конечную высоту.

Обновление 2: Используйте непрозрачность в качестве свойства перехода. На невидимом элементе установите видимость: скрытый и видимость: видимый на видимый. Это предотвратит невидимые кликабельные ссылки. Кроме того, видимый-невидимый переход не работает, не знаю почему. Надо больше работать с ним.

Пример .

0 голосов
/ 09 сентября 2012

Используйте overflow:hidden > overflow:visible, работает лучше, я использую так: 

example {
 #menu ul li ul {

    background-color:#fe1c1c;
    width:85px;
    height:0px;
    opacity:0;
    box-shadow:1px 3px 10px #000000;
    border-radius:3px;
    z-index:1;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.6s ease;

}

 #menu ul li:hover ul  {

        overflow:visible;
    opacity:1;
    height:140px;
}

лучше, чем видимый, потому что overflow:hidden действует точно так же, как display:none,

0 голосов
/ 14 ноября 2010

Для этого вы должны использовать переход непрозрачности, а не переход дисплея. Отображение: никто не удаляет элемент из макета полностью - я думаю, что вы хотите его там, но невидимо.

...