Foundation - fade out an overlay that was faded in previously?

Question

I manage to fade in an overlay when the button is clicked:

$(".button-toggle-overlay-menu").on("click", function() {
  $("#menu").toggleClass("is-open");
});

/* 
    Overlay menu
    http://zurb.com/old-bbs/overlay-navigation-menu 
    */

.button-toggle-overlay-menu {
  position: relative;
  font-size: 4rem;
  z-index: 5000;
  color: #333;
  top: -0.5rem;
  left: 1.5rem;
  transition: all 0.4s ease-in-out;
}

.button-toggle-overlay-menu:hover {
  transition: all 0.4s ease-in-out;
  color: gray;
}

.overlay-menu {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 20px;
  list-style: none;
  background: rgb(255, 255, 255);
  /* Fall-back for browsers that don't support rgba */
  background: rgba(255, 255, 255, .9);
  display: none;
  text-align: center;
  animation: fadeOut 1s;
}

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

.overlay-menu li {
  display: block;
}

.overlay-menu a {
  display: inline-block;
  color: #000;
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  text-decoration: none;
}

.overlay-menu a:hover {
  color: #808080;
}

.overlay-menu.is-open~.button-toggle-overlay-menu {
  display: inline-block;
  transition: all 0.4s ease-in-out;
  transform: rotate(135deg);
  color: #000;
}

.is-open {
  display: block;
  /* 
      Fade in the overlay 
      http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load
      */
  -webkit-animation: fadein 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s;
  /* Firefox < 16 */
  -ms-animation: fadein 1s;
  /* Internet Explorer */
  -o-animation: fadein 1s;
  /* Opera < 12.1 */
  animation: fadein 1s;
}

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


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">

<nav role="navigation">
  <ul id="menu" class="overlay-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <a class="button-toggle-overlay-menu" href="#menu"><i class="fi-plus"></i></a>
</nav>

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

<h1>Hello, world!</h1>

But I want to fade the overlay out when the button is clicked to close. I am not sure how to do it. Any ideas?

Michael Coker · Accepted Answer · 2017-05-22T00:42:14.663

The only way you can do it in pure CSS is to transition/animate opacity because you can't transition display. And I would use transition instead of animate - it's easier and shorter.

$(".button-toggle-overlay-menu").on("click", function() {
  $("#menu").toggleClass("is-open");
});

/* 
    Overlay menu
    http://zurb.com/old-bbs/overlay-navigation-menu 
    */

.button-toggle-overlay-menu {
  position: relative;
  font-size: 4rem;
  z-index: 5000;
  color: #333;
  top: -0.5rem;
  left: 1.5rem;
  transition: all 0.4s ease-in-out;
}

.button-toggle-overlay-menu:hover {
  transition: all 0.4s ease-in-out;
  color: gray;
}

.overlay-menu {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 20px;
  list-style: none;
  opacity: 0;
  transition: opacity 1s;
  background: rgb(255, 255, 255);
  /* Fall-back for browsers that don't support rgba */
  background: rgba(255, 255, 255, .9);
  text-align: center;
}

.overlay-menu li {
  display: block;
}

.overlay-menu a {
  display: inline-block;
  color: #000;
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  text-decoration: none;
}

.overlay-menu a:hover {
  color: #808080;
}

.overlay-menu.is-open~.button-toggle-overlay-menu {
  display: inline-block;
  transition: all 0.4s ease-in-out;
  transform: rotate(135deg);
  color: #000;
}

.is-open {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">

<nav role="navigation">
  <ul id="menu" class="overlay-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <a class="button-toggle-overlay-menu" href="#menu"><i class="fi-plus"></i></a>
</nav>

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

<h1>Hello, world!</h1>

To continue to use CSS to do the opacity transition, you can add an event listener on transitionend to set display: none after the element fades to opacity: 0. Then remove that display property before adding the class to change back to opacity: 1

$(".button-toggle-overlay-menu").on("click", function() {
  var $menu = $("#menu");
  if ($menu.hasClass("is-open")) {
    $menu.one("transitionend", function() {
      $(this).addClass('hidden');
    }).removeClass('is-open');
  } else {
    $menu.removeClass('hidden');
    setTimeout(function() {
      $menu.addClass("is-open");
    })
  }
});

/* 
    Overlay menu
    http://zurb.com/old-bbs/overlay-navigation-menu 
    */

.button-toggle-overlay-menu {
  position: relative;
  font-size: 4rem;
  z-index: 5000;
  color: #333;
  top: -0.5rem;
  left: 1.5rem;
  transition: all 0.4s ease-in-out;
}

.button-toggle-overlay-menu:hover {
  transition: all 0.4s ease-in-out;
  color: gray;
}

.overlay-menu {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 20px;
  list-style: none;
  opacity: 0;
  transition: opacity 1s;
  background: rgb(255, 255, 255);
  /* Fall-back for browsers that don't support rgba */
  background: rgba(255, 255, 255, .9);
  text-align: center;
}

.overlay-menu li {
  display: block;
}

.overlay-menu a {
  display: inline-block;
  color: #000;
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  text-decoration: none;
}

.overlay-menu a:hover {
  color: #808080;
}

.overlay-menu.is-open~.button-toggle-overlay-menu {
  display: inline-block;
  transition: all 0.4s ease-in-out;
  transform: rotate(135deg);
  color: #000;
}

.hidden {
  display: none;
}

.is-open {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">

<nav role="navigation">
  <ul id="menu" class="overlay-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <a class="button-toggle-overlay-menu" href="#menu"><i class="fi-plus"></i></a>
</nav>

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

<h1>Hello, world!</h1>

thanks. i have thought of that. but it has a problem if you are using opacity - you can't click the buttons behind the hidden overlay when you load the page. — Run, May 22 '17 at 00:34
@teelou you can get around that a bunch of ways. You can always just use jquery's `$.fadeToggle()` to toggle `display: none/block` instead of using CSS transitions/animations. But updated my answer with another solution that keeps the opacity transition in CSS and removes the element when it transitions to `opacity: 0` and adds it back before transitioning to `opacity: 1` — Michael Coker, May 22 '17 at 00:43
yes i know that can be done easily with jquery. i prefer using more css now these days... — Run, May 22 '17 at 00:48
@teelou no sweat. agreed, keep it in CSS when possible. `$.fadeIn()/$.fadeOut()` are expensive and usually unnecessary. — Michael Coker, May 22 '17 at 00:50

Foundation - fade out an overlay that was faded in previously?

1 Answers1