javascript - 动画菜单在后台打开

Question

我对动画菜单有疑问。

<header role="banner">
  <a class="nav-btn">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </a>  
</header>
<nav role="navigation" class="site-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav> 

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700);

@keyframes fadeInLeft {
  0% {
    transform:translateX(-100%);
  }
  100% {
    transform:translateX(0);  
  }
}

@keyframes fadeInRight {
  0% {
    transform:translateX(100%);
  }
  100% {
    transform:translateX(0);  
  }
}

.nav-btn {
  display:inline-block;
  float:right;
  position:relative;
  top:5px;
  cursor:pointer;
  transition:all 0.5s ease;
  right:0;
}

.bar {
  display:block;
  height:5px;
  width:35px;
  background-color:#111;
  margin-top: 6.5px;
  transition:all 0.5s ease;
  &:nth-of-type(1) {
    margin-top:0;
  }
}

.b-open {
  &:nth-of-type(1){
    transform:rotate(-45deg);
    transform-origin: right top;
  }
  &:nth-of-type(2){
    opacity:0;
  }
  &:nth-of-type(3){
    transform:rotate(45deg);
    transform-origin:right bottom;
  }
}

.site-nav {
  opacity:0;
  position:absolute;
  right:0;
  top:160px;
  left:0;
  bottom:0;
  text-align: center;
  font-weight: 700;
  transition:all 0.5s ease;
  li {
    background-color:rgba(#fff, 0.8);
    transition:all 0.5s ease;
  }
  a {
    display:block;
    text-decoration: none;
    color:#111;
    text-transform: uppercase;
    transition:all 0.5s ease;
    padding:40px;
    margin:0 30%;
    border-top:1px dashed lighten(#111, 60%);
  }
}

.nb-open {
  transform:rotate(-180deg);
  right:50%;
  margin-right:-23.5px;
}

.sn-open {
  opacity:1;
    li:nth-of-type(odd) {
      a { animation:fadeInLeft 0.5s ease; }
    }
    li:nth-of-type(even) {
      a { animation:fadeInRight 0.5s ease; }
    }
}

JS

$(".nav-btn").click(function(){
  $(this).toggleClass("nb-open");
  $(".site-nav").toggleClass("sn-open");
  $(".bar").toggleClass("b-open");
});

此菜单在后台打开。它是隐藏的，但鼠标光标“看到”时就好像它是打开的一样。 我该如何更改它？

是codepin的菜单http://codepen.io/emcarru/pen/bxehd

Answer 1

为什么不使用 display: none; 属性而不是使用 opacity 属性来切换可见性呢？

新 CSS(注意新的“隐藏”类):

@import url(http://fonts.googleapis.com/css?family=Roboto:400, 700);
 @keyframes fadeInLeft {
    0% {
        transform:translateX(-100%);
    }
    100% {
        transform:translateX(0);
    }
}
@keyframes fadeInRight {
    0% {
        transform:translateX(100%);
    }
    100% {
        transform:translateX(0);
    }
}
.nav-btn {
    display:inline-block;
    float:right;
    position:relative;
    top:5px;
    cursor:pointer;
    transition:all 0.5s ease;
    right:0;
}
.bar {
    display:block;
    height:5px;
    width:35px;
    background-color:#111;
    margin-top: 6.5px;
    transition:all 0.5s ease;
    &:nth-of-type(1) {
        margin-top:0;
    }
}
.b-open {
    &:nth-of-type(1) {
        transform:rotate(-45deg);
        transform-origin: right top;
    }
    &:nth-of-type(2) {
        opacity:0;
    }
    &:nth-of-type(3) {
        transform:rotate(45deg);
        transform-origin:right bottom;
    }
}
.site-nav {
    position:absolute;
    right:0;
    top:160px;
    left:0;
    bottom:0;
    text-align: center;
    font-weight: 700;
    transition:all 0.5s ease;
    li {
        background-color:rgba(#fff, 0.8);
        transition:all 0.5s ease;
    }
    a {
        display:block;
        text-decoration: none;
        color:#111;
        text-transform: uppercase;
        transition:all 0.5s ease;
        padding:40px;
        margin:0 30%;
        border-top:1px dashed lighten(#111, 60%);
    }
}
.nb-open {
    transform:rotate(-180deg);
    right:50%;
    margin-right:-23.5px;
}
.sn-open {
    li:nth-of-type(odd) {
        a {
            animation:fadeInLeft 0.5s ease;
        }
    }
    li:nth-of-type(even) {
        a {
            animation:fadeInRight 0.5s ease;
        }
    }
}
.hidden {
    display: none;
}

新的 HTML(隐藏类默认应用于菜单):

<header role="banner"> <a class="nav-btn">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </a> 
</header>
<nav role="navigation" class="site-nav hidden">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Clients</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
    </ul>
</nav>

新的 JS(隐藏类被切换):

$(".nav-btn").click(function () {
    $(this).toggleClass("nb-open");
    $(".site-nav").toggleClass("sn-open").toggleClass("hidden");
    $(".bar").toggleClass("b-open");
});

JSFiddle demo here.