it-swarm.com.ru

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

Есть ли способ использовать -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>
19
albuvee

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

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

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

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

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

Пример .

13
Klaster_1

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

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;

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

19
Bob Spryn

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

0
Michael Mullany