classList の add や remove をするとなぜ mask, modal が画面のあの位置に出てくるのでしょうか?

HTML を見ながら順を追って解説していきます。
2021年10月28日
ユーザー

こんにちは。
質問です。復習不足でしたらすいません。

classList の add と remove についてですが、

  • add : なにかを追加するイメージ
  • remove : なにかを削除するイメージ

で認識しています。調べてみましたが同様の解説でした。

動画の「どうするかというと、 mask や modal についている hidden クラスを外してあげればいいので、 classList を使っていきます。では、 remove('hidden') としてあげましょう。」で

#modal.hidden {
  transform: translate( 0, -500px);
}(ページの外)

この位置から取り除いて画面の中に動かしている。

また動画内の
「 modal と mask を消したいので、 hidden クラスをつけてあげれば OK でしょう。では、こちらで remove ではなくて、 add にしてあげれば OK です。」で

#modal.hidden {
  transform: translate( 0, -500px);
}

ページの中からこの位置に加えている(戻している)

という認識でよろしいでしょうか。

また上記の認識であっていたとしてどうして mask, modal が画面のあの位置に出てくるのでしょうか?
(仕様でしたらそのままおぼえます)
ちゃんと理解できておらずかみ砕いていただけると幸いです。

よろしくお願いいたします。

この回答を見るにはプレミアムサービスへの登録が必要です

プレミアムサービスとは?