トグルボタンで起動しないcss3の遷移

Question

これは私の非常に第2の質問です！ 私も質問で検索しましたが、何も助けません。 トランジションに問題があります。モバイルビューでトグルボタンをオンにしたときにメニューに300msのトランジションを適用しようとしています。私はクラスのメニューで負の値で無駄にしようとしました。今、メニューをスライドさせるので、スライドさせたいので、何も助けてくれないようです。私もz-indexで試しましたが、何も動かないようです。 私は本当に何をすべきか分かりません。正しい方向に私を送ることができるどんな助けも大いに評価されるでしょう！

<!-- === MENUTOGGLE === --> 
<input type="checkbox" name="checkbox" id="menuToggle" value="value"> 
<label for="menuToggle" class="menu-icon">&#9776;</label> 
<!-- ==== HEADER ==== -->  
<header> 
<div id="logo" class="brand"> 
    <h1><img src="images/logo.png" alt="Hello"></h1> 
</div>`enter code here` 
    <nav class="menu"> 
     <ul> 
      <li><a href="#">Work</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Blog </a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 
</header> 

---

* { 
    margin: 0; 
    padding: 0; 
    outline: none; 
    box-sizing: border-box; 
} 
body { 
    background: #eee; 
    color: #444; 
    -webkit-font-smoothing: antialiased; 
    font-family: Arial, sans-serif; 
    font-weight: 400; 
    height: auto !important; 
    height: 100%; 
    min-height: 100%; 
    text-rendering: optimizeLegibility; 
} 
header { 
    display: block; 
    background-color: #FFF; 
    height: inherit; 
} 
nav { 
    text-align: center; 
    line-height: 3.5em; 
} 
nav ul { 
    background-color: rgba(255, 255, 255, 0.15); 
    float: none; 
    line-height: inherit; 
    margin: 0; 
} 
nav ul li { 
    display: block; 
    list-style-type: none; 
} 
nav ul li:hover { 
    background-color: #ededed; 
} 
nav ul li a { 
    text-decoration: none; 
    color: #313131; 
} 
nav ul li a:hover { 
    color: #b9b5b5; 
} 
#menuToggle { 
    display: none; 
} 
.menu { 
    width: 100%; 
    position: absolute; 
    top: 66px; 
    transition: all 300ms ease-in-out; 
} 
.menu-icon { 
    float: right; 
    color: #2f2f2f; 
    cursor: pointer; 
    padding-top: 0.46em; 
    padding-right: 1em; 
    padding-left: 1em; 
    padding-bottom: 0.46em; 
    text-decoration: none; 
    font-size: 30px; 
} 
.menu { 
    display: none; 
} 
#menuToggle:checked ~ header .menu { 
    display: block; 
    top; 
    66px; 
} 
#logo { 
    float: none; 
    text-align: left; 
    padding-top: 7px; 
    padding-left: 2em; 
    height: inherit; 
} 

Answer 1

#menuToggle:checked ~ header .menu { 
    display: block; 
    top; 
    66px; 
} 

あなたは `display`プロパティをアニメーション化することはできませんので示したように、あなたは、` MAX-height`を使用することができます

#menuToggle:checked ~ header .menu { 
    display: block; 
    top: 66px; 
} 

Answer 2

             
  
 
   
 
    
@media screen and (min-width:600px) { 
 
#logo { 
 
float: left; 
 
} 
 
.menu { 
 
width: 100%; 
 
height: 70px; 
 
position: absolute; 
 
display: block; 
 
} 
 
.menu-icon { 
 
display: none; 
 
} 
 
header { 
 
height: 70px; 
 
background-color: #FFF; 
 
margin: auto; 
 
width: 100%; 
 
} 
 
nav { 
 
height: -66px; 
 
width: 100%; 
 
} 
 
nav ul { 
 
background-color: #FFF; 
 
display: inline; 
 
float: right; 
 
padding: 0.55em 2em 0 0; 
 
height: inherit; 
 
} 
 
nav ul li { 
 
display: inline; 
 
margin: 0.2em auto; 
 
} 
 
nav ul li:hover { 
 
background-color: #FFF; 
 
} 
 
nav ul li a { 
 
padding: 0 2em; 
 
} 
 

 
 
    
<!-- === MENUTOGGLE === --> 
 
<input type="checkbox" name="checkbox" id="menuToggle" value="value"> 
 
<label for="menuToggle" class="menu-icon">&#9776;</label> 
 
<!-- ==== HEADER ==== -->  
 
<header> 
 
<div id="logo" class="brand"> 
 
    <h1><img src="images/logo.png" alt="Hello"></h1> 
 
</div>`enter code here` 
 
    <nav class="menu"> 
 
     <ul> 
 
      <li><a href="#">Work</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Blog </a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </nav> 
 
</header>