Adding transition effects

#1

Hi yesterday I received some much needed help to (almost) complete my nav.

Today I have been tweaking the code and I have tried to add some transition effects. Its especially needed for the media screen when pressing my toggle button . I think the menu is opening to fast compared. I was hoping to add .3 sec delay on the opening effect but no matter what I have tried I get no response

Pen:

Any help would be much appreciated

Frederik

#2

Hi,

The first thing to know about transitions is that not all properties are animatable because some only have 2 states.

Your menu is hidden with display:none and display is not one of the properties that can be animated. If an element is display:none then the element is gone immediately; there is no half way house between being block and none (unlike opacity where you can go from zero to 100%).

Also there is no way to animate/transition an element to auto states so you can’t animate from say height:0 to height:auto.

If you want to hide something and then show it with a transition effect then you have to be more creative and perhaps hide off-screen instead of display:none and then bring it back on screen and you can animate the movement.

For your example you could add the following changes.

  .Navbar__Items {
    /*display:none;*/
  width:0;/* added*/
    max-height:0;/* added*/
    overflow:hidden;
  }
    .Navbar__ToggleShow {
    display: flex;
	flex-direction: column;
    max-height:none;/* added*/
	width: 100%;
    flex-basis: 100%;
  }

That will give you a little bit of text-animation when the menu is toggled. You could also experiment with opacity and other methods of hiding.

If you actually meant you wanted a delay when the hamburger was clicked then that would be very odd and feel like it was not working and I would advise against that.

#3

Hi PaulOB!
thanks for your reply and explanation.

“if you actually meant you wanted a delay when the hamburger was clicked then that would be very odd and feel like it was not working and I would advise against that.”

  • No what you have suggested is what i meant.

I added the changes like you suggested please see updated pen

. I got some sort of animation now but the items slides real fast in from the right how would I go about they going a little slower from the top to the bottom ?

Something like this is what I’m trying to achieve; http://jsfiddle.net/J7Aw7/

#4

I was able to add the desired effect but I had to change the div to display: block instead of flex not sure if that is good or bad

Updated pen in first post. Any suggestions for better solution would be appreciated

Changes I made.
div .Navbar__ToggleShow { display: block;}
added height to same element

#5

As I mentioned above you can’t animate to an auto setting. You can animate the width from 0 - 100% but you can’t do the same for the height because the element is auto height and not 100% height. 100% height is a complicated subject but essentially 100% height will only work if the parent element has a height defined (other than content or min-height) and then only if its own parent has a height defined all the way back up to root.

That means that you can’t really animate the menu to its natural height.

You could set an arbitrary max-height and then you will get some downward animation but the max-height needs to be bigger than you ever want.

e.g.

.Navbar__Items {
	width:100%;/* added*/
	max-height:0;
	overflow:hidden;
}
.Navbar__ToggleShow {
	padding-top: 10px;
	display: flex;
	max-height:30rem;/* added*/
	flex-direction: column;
	width: 100%;
	flex-basis: 100%;
}

Another method would be to hide the menu behind the background and translate it out of the top of the page by 100% and then you can animate it back. It’s a complicated method that requires elements to be stacked carefully and is used in his example I put up from another thread on a similar question.

As usual it depends on what comes next as I’m not sure if you want the page content to move down with the menu or the menu to overlay any following content as in mu demo that I linked to above.

#6

height: 170px;/* added*/

170px is a magic number because it satisfies only this one case and probably only on your computer as it assumes other users haven’t increased or zoomed their font-size. That’s why I mentioned using a max-height because it at least allows you some leeway as the max-height can be greater than the actual height although the animation won’t be so smooth.

You need to try and avoid magic numbers because they are unreliable such as in cases where you come back later and add more menu items, or text wraps to a new line, or a user increases font-size and so on… It simply cannot be relied upon in any real world application.

You need to use methods that don’t rely on fixed height unless you are controlling that with js and finding and adjusting the height at every user inter-action; not something that is nicely or easily done.:slight_smile:

#7

Thanks for your 2 lengthy and informative posts I’ll make sure to remember all of this especially your point about magic numbers .

I think at this point the menu is working like i wanted,. I could of course sit and tweak this for hours and hours but for now its working like intendent.

Thanks for all you help :=)

#8

I have a follow up question regarding my responsive nav I hope you will see this.

At this point I have styled the menu a little for mobile version with transition effects. please see the updated pen

However all the borders fades inn when I scroll down which I do not like. I only would like the curtain effect for the menu. Do you know how I can stop the fade effect on the borders but keep the curtain effect f ?

#9

also for some reason its not working in copepen atm :confused: hmmmm

fixed problem with js.

Edit: nevimnind all is fixed now:)

#10

…and how did you fix it?

#11

I had a div with transition effect which I forgot to remove.
.site-navigation div {
/* -webkit-transition: width 2s; /
/ transition: 2s; */

But of course this removes this effect when full screen, still tinkering a bit with this

#12

Thank you for letting us know what you found. smile

closed #13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.