html - 当 div 从 Transition :active Hack? 出现时淡出

Question

我想知道是否有一种简单的方法可以让我的菜单淡出，因为我已经想出了如何让它淡入。

最好是 CSS。

我正在使用 transition hack，它使用 :active 来触发菜单。也欢迎对代码提出任何建议:)

Jsfiddle:http://jsfiddle.net/VFykd/2/

HTML

<label for=checkme class=menu-button>
<div class="responsive-icon">
Trigger
</div>
</label>
<input id=checkme type=checkbox hidden>

<div class="menu">
<div class="container">
<ul>
<li>
<label for=checkme class=close-button>
<strong>X</strong></a>
</label>
<input id=checkme type=checkbox hidden></label>
</li>
<li><a href="#home" >Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#work">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>

CSS

.menu {
opacity:0;
position:fixed;
}

.close-button {
position:absolute;
right:20px;
}

.menu strong {
color:#258ace;
font-size:20px;
}

.menu a {
color:#999;
font-weight:300;
-webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
      transition: all 1s ease;
}

.menu a:hover {
color:#258ace;
font-weight:300;
text-decoration:none;
}

input:checked ~ .menu {
opacity:1;
display:inline-block;
position:fixed;
bottom:0;
left:0;
background:#222;
padding:20px 0 20px 0;
margin:0 auto;
width:100%;
z-index:999;
text-transform:uppercase;
text-align:center;
font-size:20px;
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
-ms-transition: opacity 0.5s ease-in;
transition: opacity 0.5s ease-in;
}

input:checked ~ .menu a {
opacity:1;
display:inline-block;
}


.menu-button {
position:fixed;
top:20px;
z-index:999;
width:100%;
text-align:center;
}

.menu ul {
list-style:none;
display:inline;
margin:0;
}

.menu li {
list-style:none;
display:inline;
margin:0;
margin: 0 5px 0 5px;
}

Answer 1

我想通了。在 Jsfiddle 上更新:

http://jsfiddle.net/VFykd/3/

HTML

<label for=checkme class=menu-button>
<div class="responsive-icon">
Trigger
</div>
</label>
<input id=checkme type=checkbox hidden>

<div class="menu">
<div class="container">
<ul>
<li>
<label for=checkme class=close-button>
<strong>X</strong></a>
</label>
<input id=checkme type=checkbox hidden></label>
</li>
<li><a href="#home" >Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#work">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>

CSS

.menu {
opacity:0;
position:fixed;
bottom:0;
left:0;
background:#222;
padding:20px 0 20px 0;
margin:0 auto;
width:100%;
z-index:999;
text-transform:uppercase;
text-align:center;
font-size:20px;
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
-ms-transition: opacity 0.5s ease-in;
transition: opacity 0.5s ease-in;
}

.close-button {
position:absolute;
right:20px;
}

.menu strong {
color:#258ace;
font-size:20px;
}

.menu a {
color:#999;
font-weight:300;
-webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
      transition: all 1s ease;
}

.menu a:hover {
color:#258ace;
font-weight:300;
text-decoration:none;
}

input:checked ~ .menu {
opacity:1;
display:inline-block;
position:fixed;
bottom:0;
left:0;
background:#222;
padding:20px 0 20px 0;
margin:0 auto;
width:100%;
z-index:999;
text-transform:uppercase;
text-align:center;
font-size:20px;
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
-ms-transition: opacity 0.5s ease-in;
transition: opacity 0.5s ease-in;
}

input:checked ~ .menu a {
opacity:1;
display:inline-block;
}


 .menu-button {
position:fixed;
top:20px;
z-index:999;
width:100%;
text-align:center;
}

.menu ul {
list-style:none;
display:inline;
margin:0;
}

.menu li {
list-style:none;
display:inline;
margin:0;
margin: 0 5px 0 5px;
}