レスポンシブなナビゲーションバーの崩壊にスムーズな移行を追加するにはどうすればよいですか？

Question

モバイルビューポートでナビゲーションバーが折りたたまれたときにスムーズなトランジションを追加するにはどうすればよいですか？トランジションプロパティをいくつかのクラスに追加しようとしましたが、これまで成功していませんでした。私はnavbarを次の例のようにBootstrapからnavbarに似ているように動作させようとしていますhttps://codepen.io/ScottMarshall/pen/JoGWEX。注意とサポートをありがとう。

function myFunction() { 
 
    var x = document.getElementById("myTopnav"); 
 
    if (x.className === "topnav") { 
 
    x.className += " responsive"; 
 
    } else { 
 
    x.className = "topnav"; 
 
    } 
 
}

body { 
 
    margin: 0; 
 
} 
 

 
.topnav { 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
} 
 

 
.topnav a:hover { 
 
    background-color: #ddd; 
 
    color: black; 
 
} 
 

 
.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 

 
.topnav .icon { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .topnav a:not(:first-child) { 
 
    display: none; 
 
    } 
 
    .topnav a.icon { 
 
    float: right; 
 
    display: block; 
 
    } 
 
} 
 

 
@media screen and (max-width: 600px) { 
 
    .topnav.responsive { 
 
    position: relative; 
 
    } 
 
    .topnav.responsive .icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    .topnav.responsive a { 
 
    float: none; 
 
    display: block; 
 
    text-align: left; 
 
    } 
 
}

<div class="topnav" id="myTopnav"> 
 
    <a href="#home" class="active">Home</a> 
 
    <a href="#news">News</a> 
 
    <a href="#contact">Contact</a> 
 
    <a href="#about">About</a> 
 
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> 
 
</div> 
 

 
<div style="padding-left:16px"> 
 
    <h2>Responsive Topnav Example</h2> 
 
    <p>Resize the browser window to see how it works.</p> 
 
</div>

Answer 1

transition効果を使用するには、heightプロパティを設定する必要があります。

以下のようにheightを追加します。もちろん、transitionも設定する必要があります。

.topnav{ 
    overflow:hidden; 
    ... 
    height: 50px; 
    transition: .5s; 
} 

@media ... 
.topnav.responsive { 
    ... 
    height: 200px; 
} 

.......多田~~ :)