1

I have made a little navigation, upon hovering above the home I want to let it slowly slide out to the left using a transition: 0.4s; but it doesn't want to do anything, I've applied it to every element just to show that it doesn't work no matter what.

Anyone knows how to fix this? Maybe it's because of the position: fixed; ?

I have made a jsfiddle, keep in mind that it's only a snippet of my site, and has no esthetic style.

Thanks in advance!

random_user_name
  • 25,694
  • 7
  • 76
  • 115
Zanic L3
  • 1,028
  • 1
  • 16
  • 28
  • 2
    Possible duplicate of [Transitions on the display: property](http://stackoverflow.com/questions/3331353/transitions-on-the-display-property) – random_user_name Dec 17 '16 at 00:16

4 Answers4

1

You can't put a transition on the display property.

Here is a jsFiddle that uses the transition on max-width to allow a transition to happen. 

.desktopnav > ul > .dropdown > .dropdown-content {
    float: left;
    transition: max-width 0.4s;
    overflow: hidden;
    max-width: 0px;
}

.desktopnav >ul > .dropdown:hover .dropdown-content {
    display: block;
    max-width: 500px;

}

you will need to had more css to hide undesired visual effect and force the list item to stay aligned on top.

Your use of ul/li is a bit off, li should only be children of ul elements, not section elements, and ul should only have li elements as children.

random_user_name
  • 25,694
  • 7
  • 76
  • 115
LucasP
  • 81
  • 1
  • 6
1

You cannot make a transition on the display property.

ZanicL3
  • 124
  • 1
  • 1
  • 9
0

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

This is a list of properties that can be animated. Display is not one of those. That's why you aren't seeing a transition.

Jordan Soltman
  • 3,795
  • 17
  • 31
0

You cannot animate the display property. If you want to accomplish a "slide to left" effect, you have to animate the max-width property.

I've forked your fiddle to illustrate this: https://jsfiddle.net/w811wvfp/1/

Basically what I did was:

.desktopnav > ul > .dropdown {
    ...
    white-space: nowrap;
}

.desktopnav > ul > .dropdown > .dropdown-content {
    ...
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.desktopnav > ul > .dropdown:hover .dropdown-content {
    max-width: 1000px;
}
ans
  • 46
  • 1
  • 2