CODEWITHSUNDEEP
css
Lohn Claidon
Lohn Claidon

Reputation: 415

Transition on visibility property

I'm trying to have a menu that has a submenu and this is what I have for the moment (it's more complex than this), I want to use the transition property:

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

Here is my jsfiddle: http://jsfiddle.net/4bsmq2kg/

I want my submenu to appear a little later, or like take some time to appear like in here: http://www.vmware.com

How could I make this work? I tried several things but none has been working. Thanks!

EDIT: I'm actually stupid and didn't realize a mistake there was in the code, but I still cannot find what I really wanted to find.

Upvotes: 0

Views: 566

Answers (3)

Husen
Husen

Reputation: 935

Visibility will not animate well. For that you might better animate opacity:

#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;
}

If you want the menu to slide from left to right, then you can also animate position:

#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;
}

You can check for more detail here.

Upvotes: 1

Lohn Claidon
Lohn Claidon

Reputation: 415

At the end, I mixed opacity with visibility, thank you all! going to try some of your suggestions too, Good Night!

Upvotes: 0

user663031
user663031

Reputation:

Visibility will transition, but only in binary (on/off) fashion. Perhaps you want to transition on opacity in addition (since visibility needs to be off to prevent mouse detection on the element). You probably also don't need/want the !important. Also, unless you are targeting old browser versions, you don't need the webkit-transition prefixed property (if you're going to specify it, should be -webkit-transition).

Upvotes: 2

Related Questions