コードで分からないことがあります。

花びらが定期的に生成されるコードをサイトを参考にして作成しました。

21行目でappendChildメソッドを使い子要素を削除しています。
このメソッドを外すと画面の上に花びらが積もってしまいますが、petal要素が大量に作られることによるバグでしょうか？

また、removeChildを5秒後に実行するのですが、私が思っていたのは5秒後に全てのpetal要素が消えてゼロから作られると思ったのですが、
実際は1枚ずつ消えていくのが分かりません。これが非同期処理というものでしょうか？

申し訳ありませんがよろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <link rel="stylesheet" href="style.css" />
8    <title>Document</title>
9  </head>
10  <body>
11    <div class="cherry-blossom-container"></div>
12    <script src="main.js"></script>
13  </body>
14</html>

css
1* {
2  box-sizing: border-box;
3  margin: 0;
4  padding: 0;
5}
6
7.cherry-blossom-container {
8  position: relative;
9  width: 100%;
10  height: 100vh;
11  overflow: hidden;
12}
13.petal {
14  position: absolute;
15  width: 100px;
16  height: 100px;
17  background-color: lightblue;
18  border-radius: 100% 0 100% 0;
19  animation-name: animate-petal;
20  animation-duration: 10s;
21  animation-timing-function: linear;
22  &::after {
23    content: "";
24    display: block;
25    position: absolute;
26    top: -14%;
27    left: -10%;
28    width: 100%;
29    height: 100%;
30    transform: rotate(15deg);
31    border-radius: 100% 0 100% 0;
32    background-color: lightcoral;
33  }
34}
35
36@keyframes animate-petal {
37  0% {
38    top: 0;
39  }
40  100% {
41    top: 100vh;
42    transform: rotate(300deg);
43  }
44}

js
1const cleatePetal = function () {
2  const section = document.querySelector(".cherry-blossom-container");
3  // 要素の作成
4  const petalEl = document.createElement("span");
5  petalEl.classList.add("petal");
6
7  // petalのランダムサイズの正方形作成
8  const minSize = 10;
9  const maxSize = 15;
10
11  const size = Math.floor(Math.random() * (maxSize + 1 - minSize) + minSize);
12
13  petalEl.style.width = `${size}px`;
14  petalEl.style.height = `${size}px`;
15  petalEl.style.left = Math.random() * window.innerWidth + "px";
16
17  section.appendChild(petalEl);
18
19  // 定期的に要素の削除
20  setTimeout(() => {
21    section.removeChild(petalEl);
22  }, 5000);
23};
24
25setInterval(cleatePetal, 300);

行動規範の内容に同意します

回答1件

ベストアンサー

このメソッドを外すと画面の上に花びらが積もってしまいますが、petal要素が大量に作られることによるバグでしょうか？

違います。

.petalではcssアニメーションのanimate-petalを１回だけ実行する設定になっています。
アニメーションの進行が0%→100%になると、アニメーションは100%で停止するのではなく、アニメーションが適用されない状態で停止します。
.petalの場合はtop:0pxがデフォルトの値なので、アニメーションが終了したら全ての花びらが上に張り付くように固定されます。

.petalにanimation-iteration-count: infinite;を設定すればアニメーションはループするため一番下に到達したpetalは再度一番上から降るようになります。
ただし、petalは永遠に新しく生成され続けるのでその運用をするなら最大petal数を設定したほうが良さそうです。

また、removeChildを5秒後に実行するのですが、私が思っていたのは5秒後に全てのpetal要素が消えてゼロから作られると思ったのですが、実際は1枚ずつ消えていくのが分かりません。これが非同期処理というものでしょうか？

確かに非同期処理ではありますが、非同期処理だからこういう動作になるというわけではありません。
petalElはsetInterval(cleatePetal, 300);が実行される度に新しいオブジェクトとして生成されます。1回目のpetalElと2回目のpetalElは別物です。

300ms毎に作られるpetalElをそれぞれ5000ms後にremoveするように単体でタイマーを仕掛けます。
これによりpetalは300ms毎に1つずつ作られて、300ms毎に古い順から1つずつ消えていきます。

投稿2021/10/21 14:50