クリックすると要素が回転する機能を実装したい

実現したいこと

クリックすると要素が回転する機能を実装したいです。

ここに実現したいことを箇条書きで書いてください。

・要素をクリック
・回転
・要素をクリック（２回目）
・回転

以降繰り返し

前提

html/css JavaScriptでクリックをすると回転する要素を作りました。
初回のクリックで回転することは確認できました。
2回目以降のクリックで回転しないことを確認しました。
2回目以降のクリックでも回転するように実装を行いたいです。

発生している問題・エラーメッセージ

2回目以降のクリックで回転しない。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7  <meta name="viewport" content="width=device-width, initial-scale=1.0">
8  <title>roll</title>
9</head>
10
11<body>
12
13  <div></div>
14
15  <style>
16    div {
17      width: 30px;
18      height: 10px;
19      border-radius: 10px;
20      background: #000;
21    }
22
23    .roll {
24      transform: rotate(360deg);
25      transition: all 1s;
26    }
27  </style>
28  <script>
29    const bar = document.querySelector('div')
30    console.log(bar)
31    bar.addEventListener('click', () => {
32      bar.classList.remove('roll')
33      bar.classList.add('roll')
34    })
35  </script>
36</body>
37
38</html>

試したこと

bar.classList.toggelとすることで、クリックの奇数回は回転することを確認しました。
削除を行ってから付与したらいいのかと思い、今に至ります。

以上になります。
ご教授いただけますと幸いです。

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

回答1件

ベストアンサー

javascript
1<style>
2  div {
3    width: 30px;
4    height: 10px;
5    border-radius: 10px;
6    background: #000;
7  }
8  .roll {
9    transform: rotate(360deg);
10    transition: all 1s;
11  }
12</style>
13<script>
14window.addEventListener('DOMContentLoaded', ()=>{
15  const bar = document.querySelector('div');
16  bar.addEventListener('click', () => {
17    bar.classList.add('roll')
18  });
19  bar.addEventListener('transitionend', () => {
20    bar.classList.remove('roll')
21  })
22});
23</script>
24<div></div>