Fullscreen menu overlay: how do I make it fade in and out?

Question

I've never worked with Javascript before so this is new territory for me.

I've used this code to make an overlay menu:

https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp

It's working fine but the link doesn't tell me how to make it fade in and out gracefully. Right now, I'm using the very bottom JS option, which is without animation.

I found an answer via Ibu here:

How to do fade-in and fade-out with JavaScript and CSS

But I don't know how to combine it with what I already have from the first link.

score 0 · Answer 1 · answered Jul 19 '21 at 16:33

You must simply add transition to your CSS selector. Remember that transition sometimes doesn't affect some properties like display or transform.

const fade = () => {
  const foo = document.querySelector('.foo');
  
  foo.style.height = 'calc(100px + 50px)';
};

const fadeOut = () => {
  const foo = document.querySelector('.foo');
  
  foo.style.height = 'calc(150px - 50px)';
};

document.querySelector('.fade').addEventListener('click', fade);
document.querySelector('.fadeOut').addEventListener('click', fadeOut);

.foo {
  background-color: orange;
  width: 200px;
  height: 100px;
  transition: 350ms ease-in-out;
}

<button type="button" class="fade">Fade</button>
<button type="button" class="fadeOut">Fade Out</button>
<section class="foo"></section>

Fullscreen menu overlay: how do I make it fade in and out?

1 Answers1