Menu icon Foundation
Off-Canvas Overlay Transition

There isn't a transition happening when I open and close my Off-Canvas menu. The CSS rules are there with all vendor prefixes and oddly enough, it works in inspector if I toggle the overlay color on and off, but it does not work when I press the hamburger menu. This has been encountered in older versions but new insight would be greatly appreciated as it makes the website look way more amateurish than it should! It's a great plugin but those kinds of details really matter. Any ideas would be much appreciated!

 

Similar post from three years ago...


http://foundation.zurb.com/forum/posts/15979-off-canvas-back-link-overlay-transition

posted by @KarlErtl

off-canvasoverlaytransitionfoundation 6

There isn't a transition happening when I open and close my Off-Canvas menu. The CSS rules are there with all vendor prefixes and oddly enough, it works in inspector if I toggle the overlay color on and off, but it does not work when I press the hamburger menu. This has been encountered in older versions but new insight would be greatly appreciated as it makes the website look way more amateurish than it should! It's a great plugin but those kinds of details really matter. Any ideas would be much appreciated!

 

Similar post from three years ago...


http://foundation.zurb.com/forum/posts/15979-off-canvas-back-link-overlay-transition

posted by @KarlErtl

Rafi Benkual over 3 years ago

A code snippet or demo would really out here since it seems to work as expected on the docs. Here is a blank codepen:

http://codepen.io/rafibomb/pen/ZWapbQ

James Lanman over 3 years ago

Hey Rafi! Thanks for responding. New time I'll start with a codepen. Here is the codepen that demonstrates the behavior I am talking about. Notice the dark overlay doesn't transition even though it is specified. The shift to overlay is instantaneous on clicking the hamburger but it should be gradual as specified in the CSS, no? Maybe I'm missing something obvious. I appreciate your help on this matter regardless!

 

http://codepen.io/jackoftrades/pen/zqPRye

 

James Lanman over 3 years ago

@rafi bump. Any insight?

Dominik Pieper over 3 years ago

Hi,

I'm not Rafi, I hope this is ok :-P

The problem here is, that all major browsers disable CSS transitions, if you change the display property. If you want a fade effect, you can use CSS animations, they should work.

James Lanman over 3 years ago

@dominik Thank you so much! It's more than okay that you're not Rafi. ;D. I really appreciate this - very helpful.