Animating an Object Fading Away

[l008comm]

I'm working on a mobile site. Like many mobile sites, it has a hamburger button that when pressed, causes a menu to slide over from the side of the page. The menu covers about 80% of the width of the page. So you still see a strip of the page under the menu, to the right of it.

It doesn't look right, the page needs to be darkened out somehow to direct full focus to the open menu.
The easy way to do this was to simply add a box shadow to the menu. However this box shadow slides in and how with the menu, and that is slowwwww on Android phones. It works great on iPhones but not android.

So I'm switching to plan B: No box shadow. Then I add a fixed position DIV to the page, black background, opacity 0.7. It goes between the menu and the page. Now the new problem is, I want to animate this fading in and out.

The best way I can think of doing that is setting a transition on the opacity. But in order to implement, I'd need to initiate this in javascript, then also set a timer in javascript that matches the timer on the CSS so that when the animation is done, I can then add 'display: none' to make the now fully transparent item disappear.

This plan B should work. But I'm wondering if I'm taking the long route to my destination. Is there a simpler, more logical way to do this?

[csdude55]

A few months late, but I'm not able to envision what you're trying to do. Are you trying to make the whole menu fade away when they click?

If so, I do this with:

var fadeID = document.getElementById('foo');
setTimeout(fade(), 3000);

function fade(i = 1) {
 var timer = setInterval(() => {
  i -= 0.05;

  fadeID.style.opacity =
  fadeID.style.MozOpacity =
  fadeID.style.KhtmlOpacity = i;

  fadeID.style.filter = 'alpha(opacity=' + (i * 100) + ');';

  if (i <= 0) {
   clearInterval(timer);
   fadeID.style.display = 'none';
  }
 }, 100);
}

[l008comm]

I went with my solution but I solved the "timer to make the shadow box disappear" problem by NOT making it disappear. I toggle it's opacity between fully transparent and partially transparent. But I also use pointer-events: none to make it so clicks go right through, then pointer-events: auto when it's a shadow again.

This makes it much simpler because I can toggle the pointer-events property right away. It's not a visual thing so it doesn't have to happen in sync with the animation finishing. So there are two classes I toggle in JS, one has the box fully transparent and passing all clicks through, the other catches all clicks (clicking when the shadow is there hides the menu and disengages this psudeo-shadow) and makes the box nice and dark.


A very nice, clean, very simple solution.