JS/CSS - モバイルメニューのアニメーションを切り替える

Question

この男と闘うどんな助けでも大歓迎です！

_Sテーマのモバイルメニューのイン/アウトの遷移をアニメーションしようとしています。

実際にJSFiddleを作成することはできません。コンテンツは、vanilla JSを使用して動的に生成されるためです。これは、モバイルクラスを切り替えるためのコアJSのように見える

携帯メニューアイコンのクリック時に「.toggled」：

button.onclick = function() { 
    if (-1 !== container.className.indexOf('toggled')) { 
     container.className = container.className.replace(' toggled', ''); 
     button.setAttribute('aria-expanded', 'false'); 
     menu.setAttribute('aria-expanded', 'false'); 

    } else { 
     container.className += ' toggled'; 
     button.setAttribute('aria-expanded', 'true'); 
     menu.setAttribute('aria-expanded', 'true'); 
    } 
}; 

私はこれまでアニメーション化するために管理してきた唯一の方法は、CSSのキーフレームであります.main-navigation.toggledクラスの2番目のクリックでクラスが削除され、単にこのスクリーンサイズで隠された.main-navigationに戻ります。

理想的には、.slideToggleや.fadeToggleのようなものを使ってJS/JQUERYを使ってアニメートしたいのですが、私はこの作業をするのに苦労しました。

_Sテーマを扱っている他のコーダーにとって、これは最新バージョンの.main-navigation.jsをカスタマイズしようとしているので便利です。

多くの方々、ありがとうございます！

Answer 1

私は同じ問題に直面し、3日間ナットを運転しました。私はCSS3 Transitionを使ってメニューを 'アニメ化'することになった。

私はnavigation.jsファイル内で何も変更しませんでした（そこにはさまざまなことが試されていましたが、何も機能しませんでした）。

私はstyle.cssにして二つのことを変更し、トランジションを追加しました：

.main-navigation ul { 
    display: block; 
    list-style: none; 
    position: absolute; 
    left: -250px; 
    transition: left 1s ease-in-out; 
} 

/* Small menu. */ 
.menu-toggle, 
.main-navigation.toggled ul { 
    left: 0; 
    transition: left 1s ease-in-out; 
} 

・ホープ、このことができます！