Переход на видимость собственности

Question

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

.product:hover #button-option { 
    visibility: visible !important; 
} 
#button-option { 
    visibility: hidden; 
    -webkit-transition: visibility .2s; 
    transition: visibility .2s; 
} 

Вот мой jsfiddle: http://jsfiddle.net/4bsmq2kg/

Я хочу, чтобы мое подменю появиться чуть позже, или как занять некоторое время, чтобы выглядеть, как здесь: http://www.vmware.com

Как я мог сделать эту работу? Я пробовал несколько вещей, но никто не работал. Благодаря!

EDIT: Я действительно глуп и не осознал ошибку, которая была в коде, но я все еще не могу найти то, что я действительно хотел найти.

Answer 1

Видимость будет проходить, но только в двоичном (вкл/выкл) режиме. Возможно, вы хотите перейти на opacity в дополнение (поскольку visibility необходимо отключить, чтобы предотвратить обнаружение мыши на элементе). Вам, вероятно, также не нужен/нужен !important. Кроме того, если вы не нацеливаете старые версии браузера, вам не нужно иметь префиксное свойство webkit-transition (если вы укажете его, должно быть -webkit-transition).

Answer 2

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

#button-option { 
    opacity: 0; 
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out; 
} 
.product:hover #button-option { 
    opacity: 1; 
} 

Если вы хотите, чтобы меню скользить слева направо, то вы можете также анимировать положение:

#button-option { 
    left: -300px; 
    -webkit-transition: all 0.5s ease-out; 
    -moz-transition: all 0.5s ease-out; 
    transition: all 0.5s ease-out; 
} 
.product:hover #button-option { 
    left: 0px; 
} 

Вы можете проверить более подробно here.

Answer 3

В конце, я смешивал непрозрачность с видимостью, спасибо вам всем! собираюсь попробовать некоторые из ваших предложений тоже, Спокойной ночи!