Foundation - 淡出之前淡入的叠加层？

Question

我设法在单击按钮时淡入叠加层：

$(".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 
      
      */
  -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>

但我想在单击按钮关闭时淡出叠加层。我不知道该怎么做。有什么想法吗？

Answer 1

您可以在纯 CSS 中做到这一点的唯一方法是 transition/animate opacity，因为您无法转换 display。我会使用 transition 而不是 animate - 它更简单也更短。

$(".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>

要继续使用 CSS 进行不透明度过渡，您可以在 transitionend 上添加事件侦听器以在元素淡出到 opacity: 0 后设置 display: none。然后在添加 class 更改回 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>

Foundation - 淡出之前淡入的叠加层？

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

javascript

css

jquery

zurb-foundation