-webkit-transition with display

Question

Is there a way to use -webkit-transition with display?

I'm using CSS display to hide and show a navigations second level … but only display: none and display: block on :hover is a little un-sexy… a ease would be great (like -webkit-transition: display 300ms ease-in;)

I know that's fairly easy to do this with jQuery, but I'm currently trying to setup everything with CSS3 (i know: not all browsers do support it, but that's irrelevant for this one project I'm currently working on)

here's some code & structure: (the li.menu1 has a :hover with 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>

Can you show navigation structure? Or even example. – Klaster_1 Нет войне Nov 15 '10 at 04:07 — Klaster_1 Нет войне, Nov 15 '10 at 04:07

score 18 · Answer 1 · answered Mar 08 '11 at 04:26

So I'm not sure I see all the pieces put together here. You want to animate opacity and visibility, with visibility having a delay so opacity is done before it triggers;

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;

to

opacity: 1;
visibility: visible;

visibility will wait .5s and then switch over to hidden. You can even turn off the visibility transition on one side if you want it to fade both ways. (So that when fading in, the element is instantly visible instead of waiting .5s and transitioning.)

Klaster_1 Нет войне · Accepted Answer · 2010-11-15T08:38:03.220

13

You should use height or width transition in order to show and hide second level menu. Display property is not supported by transitions.

There is an article at ODC with something similar to your needs. Also, I've modified it a bit in order to look more like menu item. Works perfect in Opera 10.7, without transitions in Firefox 3.6.12 and doesn't at all in Chrome 7.0.517.41.

I hope this will be useful as start point for your own animated menu.

Update 1: Your menu with ease-in transitions. Probably, I've got something wrong about it's structure. The problem is that transitions do not work with auto, so you have to manually specify final height.

Update 2: Use opacity as transition property. On invisible element set visibility:hidden and visibility:visible on visible. That will prevent from invisible clickable links. Also, visible-invisible transition doesn't work, don't know why. Have to work more om it.

Example.

edited Nov 15 '10 at 08:38

answered Nov 15 '10 at 05:10

Klaster_1 Нет войне

11,790
9
61
73

YEAH! Thx! … on hidden: and on the visible: – albuvee Nov 29 '10 at 19:41
The only keywords that work are colors. center, left, right, auto, etc are not transitioned (yet, I'd add) unfortunately. – fregante Jan 25 '11 at 22:08
Fades in great, but unfortunately the fade *out* doesn't work with this. – alirobe Oct 26 '11 at 03:16
2

If you want to fade both out and in, you can use the workaround in this gist: https://gist.github.com/2933815 – Claude Jun 15 '12 at 00:24
It should be noted that if you want this to work on an iOS device, as far as I'm aware it _has_ to use display: block; and display: none; to hide, which is a tad frustrating. It may be that jQuery or similar provides the most robust solution when animation and tablet / phone support are required. – Mike Feb 07 '13 at 00:34

score 0 · Answer 3 · answered Nov 14 '10 at 17:25

0

You should use an opacity transition, not a display transition for this. Display:none removes an element from the layout entirely - I think you want it there, but invisible.

answered Nov 14 '10 at 17:25

Michael Mullany

30,283
6
81
105

2

hmm, if i use opacity, there are major problem with the :hover (because the element is there but invisible, therefore :hover'able/clickable) :-/ – albuvee Nov 14 '10 at 19:08

score -2 · Answer 4 · edited Sep 14 '12 at 08:58

-2

Use overflow:hidden > overflow:visible , works better, I use like this:

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

is better than visible because overflow:hidden act exactly like a display:none,

edited Sep 14 '12 at 08:58

Himanshu

31,810
31
111
133

answered Sep 09 '12 at 01:52

jesus

1

First: please correct your code, its invalid. Second: overflow is not supported as transition. – Mark Sep 24 '12 at 14:38

-webkit-transition with display

4 Answers4

Linked