#ИМЯ?

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

Я использую CSS display, чтобы скрыть и показать второй уровень навигации... но только display: none и display: block на :hover немного не секси... a 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>

Ответы

Ответ 1

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

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

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

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

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

Пример.

Ответ 2

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

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;

to

opacity: 1;
visibility: visible;

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

Ответ 3

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

Ответ 4

Использовать 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,