Css transition from display none to display block, navigation with subnav

Question

This is what I have jsFiddle link

nav.main ul ul {
    position: absolute;
    list-style: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    padding: 10px;
    background-color: rgba(92, 91, 87, 0.9);
    -webkit-transition: opacity 600ms, visibility 600ms;
            transition: opacity 600ms, visibility 600ms;
}

nav.main ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 1;
}

<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
    </ul>
</nav>

Why is there no transition? If I set

nav.main ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 0; /* changed this line */
}

Then the "subnav" will never appear (of course ) but why does the transition on the opacity not trigger? How to get the transition working?

Fade transition works for me if you remove the display properties: https://jsfiddle.net/LgvhLxya/ — James Waddington, Aug 04 '16 at 16:24
Why don't you do it with Jquery show and hide? Then, you can do your animation. — Vcasso, Aug 04 '16 at 16:26

score 103 · Accepted Answer · answered Aug 04 '16 at 16:26

103

As you know the display property cannot be animated BUT just by having it in your CSS it overrides the visibility and opacity transitions.

The solution...just removed the display properties.

nav.main ul ul {
  position: absolute;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  padding: 10px;
  background-color: rgba(92, 91, 87, 0.9);
  -webkit-transition: opacity 600ms, visibility 600ms;
  transition: opacity 600ms, visibility 600ms;
}
nav.main ul li:hover ul {
  visibility: visible;
  opacity: 1;
}

<nav class="main">
  <ul>
    <li>
      <a href="">Lorem</a>
      <ul>
        <li><a href="">Ipsum</a>
        </li>
        <li><a href="">Dolor</a>
        </li>
        <li><a href="">Sit</a>
        </li>
        <li><a href="">Amet</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

answered Aug 04 '16 at 16:26

Paulie_D

107,962
13
142
161

71

Yes, but that ul will take up the space in the dom this way. – Vcasso Aug 04 '16 at 16:28
3

Shouldn't matter because you are using absolute positioning which removed the element from normal document flow. Here is another post similar to your's ... http://stackoverflow.com/questions/22103006/css3-transition-doesnt-work-with-display-property. Remove both `display:none` and `visibility:hidden`. – Kenneth Stoddard Aug 04 '16 at 16:50
9

Yes but this causes weird clickable but invisible links. It may interrupt your other elements if they're on the same space. – Erlisar Vasquez Jul 19 '19 at 09:07
3

Also using keyboard navigation is disrupted as tabbing around will select invisible links (and thus have no visible effect to the user – confusing to say the least). – zrajm Aug 24 '19 at 15:41
@Vcasso for the occupied space problem, in this solution you can add max-height property and define it in the transition property, when hover out just set the max-height 0 else set to some high value and then it will not occupy the space. – Aamir Khan May 05 '23 at 10:45

AiDev · Answer 2 · 2017-05-11T08:09:48.560

84

Generally when people are trying to animate display: none what they really want is:

Fade content in, and
Have the item not take up space in the document when hidden

Most popular answers use visibility, which can only achieve the first goal, but luckily it's just as easy to achieve both by using position.

Since position: absolute removes the element from typing document flow spacing, you can toggle between position: absolute and position: static (global default), combined with opacity. See the below example.

.content-page {
  position:absolute;
  opacity: 0;
}

.content-page.active {
  position: static;
  opacity: 1;
  transition: opacity 1s linear;
}

edited May 11 '17 at 08:09

answered May 11 '17 at 08:04

AiDev

1,214
8
11

8

What if I'm using `display: flex` on a parent element to have a vertically centered content (to be faded out/in)? `position: absolute` breaks it then. – Jānis Elmeris Oct 07 '17 at 21:02
There are other ways to vertically center, such as using line height, view height, or jquery/javascript. Or can you create childen within your flex displayed parent? – AiDev Oct 08 '17 at 05:16
What do you suggest if I can create children? – Jānis Elmeris Oct 09 '17 at 07:57
2

[Animating `position`](https://codepen.io/dandv/pen/oQgEME) doesn't work on iOS Safari :-/ – Dan Dascalescu Nov 05 '18 at 08:09
Personally I like to avoid JS timers. So fading opacity and then setting display:none; would be nice. – Ben Racicot May 22 '19 at 19:30
1

Who says that absolute positioned elements do not take up space? https://jsfiddle.net/centurianii/nwvyf749/ – centurian Oct 22 '19 at 15:52
I needed this! Thank you! – Paolo_000 May 08 '20 at 10:30
But with this solution, I am still able to modify the element with opacity = 0. For example, if this was a selectbox, I could potentially select an option. Can I somehow disable this? – Luk Jan 24 '22 at 16:12
This answer has helped me, thanks a lot @AiDev – Awshaf Ishtiaque Jul 29 '23 at 11:09

spirift · Answer 3 · 2018-11-07T11:38:38.457

51

You can do this with animation-keyframe rather than transition. Change your hover declaration and add the animation keyframe, you might also need to add browser prefixes for -moz- and -webkit-. See https://developer.mozilla.org/en/docs/Web/CSS/@keyframes for more detailed info.

nav.main ul ul {
    position: absolute;
    list-style: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    padding: 10px;
    background-color: rgba(92, 91, 87, 0.9);
    -webkit-transition: opacity 600ms, visibility 600ms;
            transition: opacity 600ms, visibility 600ms;
}

nav.main ul li:hover ul {
    display: block;
    visibility: visible;
    opacity: 1;
    animation: fade 1s;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

<nav class="main">
    <ul>
        <li>
            <a href="">Lorem</a>
            <ul>
                <li><a href="">Ipsum</a></li>
                <li><a href="">Dolor</a></li>
                <li><a href="">Sit</a></li>
                <li><a href="">Amet</a></li>
            </ul>
        </li>
    </ul>
</nav>

Here is an update on your fiddle. https://jsfiddle.net/orax9d9u/1/

edited Nov 07 '18 at 11:38

answered Aug 04 '16 at 16:35

spirift

2,994
1
13
18

2

This is very clever. display:none -->block cannot animate, but adding a visibility:hidden --> visible triggers it. Coolio! – Drenai Sep 21 '17 at 11:55
@Drenai: where is `visibility: hidden` used? – Dan Dascalescu Nov 05 '18 at 04:16
@DanDascalescu I've updated the answer to include the base styles – spirift Nov 07 '18 at 11:39
That's the only viable answer! Playing with position `absolute` or `static` is wrong as someone else suggested! https://jsfiddle.net/centurianii/nwvyf749/ – centurian Oct 22 '19 at 15:51
3

In case you use this solution keep in mind that it works only on fade in. It won't work for fade out because display:none is applied immediately. – J. Wrong Feb 07 '21 at 04:29

Css transition from display none to display block, navigation with subnav

3 Answers3

Linked

Related