アニメーションJavascript classList.toggle

Question

私は最近、CSSとHTMLを学び始め、応答性の高いナビゲーションバーのためにthisチュートリアルが見つかりました。

javascript関数classList.toggleを使用して、navbarのモバイル版を表示します。これをアニメートしてトランジションを追加する方法はありますか？

Answer 1

CSS属性をアニメートすることはできませんが、CSSプロパティをアニメーション化することはできます。あなたは、このように、あなたの.topnavクラスの最初のCSS定義を持っている必要があり

：このコードへ

.topnav { 
    background-color: black; /* Set an initial background */ 
    transition: background-color 200ms; /* Tell browser to use a transition when background-color changed */ 
} 

おかげで、あなたの.topnav要素の背景色が変わりますいつでも、移行が発生します。

.topnav.responsive { 
    background-color: blue; 
} 

をそして、これはあなたのJSコードで動作します：

あなたは、例えば、このCSSを追加することができます。もちろん

、私の例では基本的なものだけ背景色の移行が追加されますが、それはあなたの問題についてのあなたを助ける必要があります:)