CODEWITHSUNDEEP
javascripthtmlcssanimation
ownidea
ownidea

Reputation: 63

Multiple actions for one button

I'm trying to make full screen menu like a modal. Everything is fine except fadeOut animation. Can someone explain what is wrong with my scripts/codes? I want to make this content fades in when click the button but fades out when its clicked again. My script sets the value of "display" but in animation only fade in effect works fine. In reverse fade out do effect instantly (without 0.5s animation duration). Button has got z-index = 101 and menu-content = 100 so the button stay at the same place all the time.

Thanks

function myMenu() {
  var x = document.getElementById("menu-content");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
  if (x.style.animation === "fadeIn 0.5s ease-in-out") {
    x.style.animation = "fadeOut 0.5s ease-in-out";
  } else {
    x.style.animation = "fadeIn 0.5s ease-in-out";
  }
}
#menu-content {
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(-25deg, #c0a0ae, #6f448a);
  z-index: 100;
  top: 0;
  left: 0;
  animation: fadeOut 0.5s ease-in-out;
}

.menu-content-properties {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  background: #000000;
  opacity: 0.5;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
<button id="menu-button" style="z-index: 101; position: absolute; top: 0; 
left: 0;" onclick="myMenu();">Menu</button>
<div id="menu-content"></div>

<div id="menu-content">
<div class="menu-content-properties">
<div>1</div>
<div></div>
<div>2</div>
</div>
</div>

Upvotes: 0

Views: 1981

Answers (1)

user184994
user184994

Reputation: 18281

Okay, so there are a couple of issues.

Firstly, in your HTML, there are 2 elements with the same ID (menu-content) which will cause a couple of problems, so remove one of those.

Secondly, when you set display: none in your myMenu function, it will immediately be hidden, so that's why the animation is not shown.

You have a couple of options:

  • Put that code within a setTimeout so that it isnt set to display: none until the animation has finished, OR

  • Don't use display: none

Personally, I think you're better off not using display: none, otherwise you need to amend your javascript whenever you change the duration of the animation.

I've managed to get it working without the need for display none, and using CSS transitions which works quite nicely

function myMenu() {
  var x = document.getElementById("menu-content");

  if (x.classList.contains("open")) {
    x.classList.remove("open");
  } else {
    x.classList.add("open");
  }

}
#menu-content {
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(-25deg, #c0a0ae, #6f448a);
  z-index: 100;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}

#menu-content.open {
  opacity: 1;
}

.menu-content-properties {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  background: #000000;
  opacity: 0.5;
}
<button id="menu-button" style="z-index: 101; position: absolute; top: 0; 
left: 0;" onclick="myMenu();">Menu</button>

<div id="menu-content">
<div class="menu-content-properties">
<div>1</div>
<div></div>
<div>2</div>
</div>
</div>

Upvotes: 0

Related Questions