transition для меню

[rus]

Для меня было новостью, что transition не работает со св-вом display: none;

Как быть тогда, если я хочу плавно показать в горизонтальном меню выпадающие подпункты и без js, jq?

[li4e]

max-height, но нужно знать максимально возможную высоту

[rus]

не, высота заранее не известна

[li4e]

Если элемент абсолютно позиционирован то, можно совместить opacity + z-index
Если такой эффект будет уместен, а именно вертикальное раскрытие, даже не знаю, когда столкнулся с подобным, ничего кроме max-height не нашел, будет полезно если есть лучше вариант.

Так же можно попробовать поиграться с заданием max-height с запасом, но опять же так себе вариант. 

Edited October 30, 2015 by li4e

[Launder]

Ну вот вроде что-то похожее нашёл:

 

http://cssdeck.com/labs/lk0fvhvt

 

вот ещё:

 

http://cssdeck.com/labs/rvx4csah

 

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

 

В общем вот тут можно поискать решение...

 

http://htmlbook.ru/practical/nispadayushchee-menyu

Edited October 30, 2015 by Launder

[rus]

Ну вот вроде что-то похожее нашёл:

 

http://cssdeck.com/labs/lk0fvhvt

 

вот ещё:

 

http://cssdeck.com/labs/rvx4csah

 

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

 

В общем вот тут можно поискать решение...

 

http://htmlbook.ru/practical/nispadayushchee-menyu

да, как раз вот только-только увидел что работает со св-вом visibility.

как всегда - стоит только создать тему, как ответ сам плывет к тебе в руки

[rus]

нет, что-то ни фига не работает: http://jsfiddle.net/rus333/kvcm9sf0/

[Нарек]

Сам по себе visibility не будет работать с transition. Но если добавить opacity то сработает. 

Edited October 30, 2015 by Нарек

[rus]

Сам по себе visibility не будет работать с transition. Но если добавить opacity то сработает. 

точно! спасибо.

[Launder]

Я прошу прощения, если transition использует opacity, как основное свойство, меняющее отображение элемента, при этом, отображение "поверх" основного потока происходит благодаря позционированию, зачем вообще, в этом случае, нужен visibility?

[Нарек]

Я прошу прощения, если transition использует opacity, как основное свойство, меняющее отображение элемента, при этом, отображение "поверх" основного потока происходит благодаря позционированию, зачем вообще, в этом случае, нужен visibility?

 

Чтобы скрыть элемент. Без него блок будет виден как только на него наведут. Попробуйте  водить мышкой снизу вверх к пункту "Обувь" без visibility:hidden;.

[Launder]

 

Я прошу прощения, если transition использует opacity, как основное свойство, меняющее отображение элемента, при этом, отображение "поверх" основного потока происходит благодаря позционированию, зачем вообще, в этом случае, нужен visibility?

 

Чтобы скрыть элемент. Без него блок будет виден как только на него наведут.

 

 

Вроде понял почему. Потому, что когда элемент не скрыт, то, он получается есть, но он прозрачен и когда на него наведут мышкой он показывается. Когда же элемент скрыт, то СНАЧАЛА нужно навести на не скрытый участок и только тогда показывается остальная часть.

Разница же между visibility и display в том, что visibility просто скрывает элемент от просмотра, оставляя его пространство не занятым другими элементами, а display делает так, что элемента как буд-то нет... Но поскольку применяется абсолютное позиционирование, элемент, который мы скрываем/отображаем всё равно выводится из потока, поэтому зарезервированное место не влияет на основной поток документа, а при необходимости может отображаться поверх.

Edited November 3, 2015 by Launder