Vanilla JS setTimeout(): 間違った動作の特定

Question

ハンバーガー メニューのアニメーションを HTML、CSS、および Vanilla JavaScript で作成しました。

期待される結果

ハンバーガー メニュー ボタンをクリックすると、次のイベントが発生します:

ハンバーガーメニューアイコンをクリックした場合:

1. main 180°回転し、2000ms
で高さに沿ってズームアウトします。
2. 2000ms が経過すると、メニューが表示され、ハンバーガーのアイコンが # に変わります。

終了ボタンをクリックした場合:

ページをさらに 180 度回転してメニューをカバーします
メニューの非表示:
2. 表示: なし;
終了ボタンをハンバーガーアイコンに戻す

実際に何が起こったのか

主な問題は、12 ～ 14 行目の

settimeout によりボタンを終了できないことです。 理解を深めるためのコードスニペットを次に示します。

リーリー リーリー リーリー

Answer 1

終了クリックがアニメーションなしで元の状態に戻るだけということであれば、.move-away クラスで transition 属性を定義し、終了時にそれを定義しているためです。クリックしたらすぐに削除します。

この transition: all 2000msscape-in​​-out; を main スタイル (CSS ファイルの 14 行目) に移動して、アニメーションが両方向に動作するようにする必要があります。