-webkit-переход с дисплеем

Question

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

Answer 1

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

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

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

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

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

Example.

Answer 2

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

Answer 3

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

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 и переходит.)

Answer 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,