粉底 - 淡出以前褪色的叠加层？

时间：2017-05-21 23:57:24

标签： javascript jquery css zurb-foundation

单击按钮时，我设法淡化叠加层：

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

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

1 个答案:

答案 0 :(得分：1)

在纯CSS中执行此操作的唯一方法是转换/动画 #include <iostream> #include <string> using namespace std; void PrintIntro(); string GetGuessAndPrintBack(); // the entry point for our application int main() { PrintIntro(); GetGuessAndPrintBack(); GetGuessAndPrintBack(); cout << endl; return 0; } // introduce the game void PrintIntro() { constexpr int WORD_LENGTH = 9; cout << "Welcome to Bulls and Cows, a fun word game.\n"; cout << "Can you guess the " << WORD_LENGTH; cout << " letter isogram I'm thinking of?\n"; cout << endl; return; } // get a guess from the player string GetGuessAndPrintBack() { cout << "Enter your guess: "; string Guess = ""; getline(cin, Guess); // print the guess back cout << "Your guess was: " << Guess << endl; return Guess; } ，因为您无法转换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;
}

要继续使用CSS执行不透明度转换，您可以在<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>上添加一个事件侦听器，以便在元素渐变为transitionend后设置display: none。然后在添加类之前删除该显示属性以更改回opacity: 0 

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;
}

相关问题
最新问题