84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
ハンバーガー メニューのアニメーションを HTML、CSS、および Vanilla JavaScript で作成しました。
ハンバーガー メニュー ボタンをクリックすると、次のイベントが発生します:
main
2000ms
が経過すると、メニューが表示され、ハンバーガーのアイコンが
settimeout によりボタンを終了できないことです。 理解を深めるためのコードスニペットを次に示します。
によりボタンを終了できないことです。 理解を深めるためのコードスニペットを次に示します。
終了クリックがアニメーションなしで元の状態に戻るだけということであれば、.move-away クラスで transition 属性を定義し、終了時にそれを定義しているためです。クリックしたらすぐに削除します。
.move-away
transition
この transition: all 2000msscape-in-out; を main スタイル (CSS ファイルの 14 行目) に移動して、アニメーションが両方向に動作するようにする必要があります。
transition: all 2000msscape-in-out;
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
終了クリックがアニメーションなしで元の状態に戻るだけということであれば、
.move-awayクラスでtransition属性を定義し、終了時にそれを定義しているためです。クリックしたらすぐに削除します。この
transition: all 2000msscape-in-out;をmainスタイル (CSS ファイルの 14 行目) に移動して、アニメーションが両方向に動作するようにする必要があります。