Tailwind CSSで要素を一度だけ一回転させる #JavaScript

Tailwind CSSで作成しているウェブサイトで
「クリックするたびに、アイコンが反時計回りに一回転する」
という演出を作ろうとしたところ、意外と難しかったのでメモしておきます。

うまく行かない例：その１

アイコンを0.7秒でくるんと回したいので、.-rotate-[360].transition-transform.duration-700 を付与して以下のようにHTMLを書いてビルドしました。

<span class="w-16 h-16 flex flex-col justify-center items-center gap-2
  -rotate-[360deg]
  transition-transform
  duration-700
">
  ここにアイコンが入る
</span>

すると、HTMLをブラウザで表示した途端に一回転してしまいました。

うまく行かない例：その２

-rotate-[360deg]が入っているのがいけないのだな、と思い、先ほどのコードから削除しました。

<span class="w-16 h-16 flex flex-col justify-center items-center gap-2
  transition-transform
  duration-700
">
  ここにアイコンが入る
</span>

このままだとTailwindが-rotate-[360deg]クラスを書き出してくれないので、必ず書き出させるよう、セーフリストに入れておきます。

tailwind_config.js

・・・
safelist: [
  '-rotate-[360deg]'
],
・・・

-rotate-[360deg]は、JavaScriptのクリックイベントが発生したときに付与することにしました。

icon.addEventListener('click', ()=> {
    icon.classList.add('-rotate-[360deg]');
    const delay = setTimeout(() => {
      icon.classList.remove('-rotate-[360deg]');
    },700);
});

よーしこれで完璧やー！
…と思ったのですが、なんと一回転したあと、逆回転して元に戻ってしまいます。

原因

.transition-transform.duration-700 をアイコンに付与していたのが原因でした。
そもそも回転の場合は、transitionは必要なかったです…

動きと早さがHTMLに固定されているため、DOM操作でrotateクラスを削除した途端に、元に戻るアニメーションが発動してしまっていたのです。

正しい書き方

アイコンから不要なクラスを削除します。

<span class="w-16 h-16 flex flex-col justify-center items-center gap-2">
  ここにアイコンが入る
</span>

セーフリストにはduration-700も追加しておきます。

tailwind_config.js

・・・
safelist: [
  '-rotate-[360deg]',
  'duration-700'
],
・・・

そのうえで、JavaScriptのクリックイベントが発生したときに、rotateとdurationの両方を付与・削除させます。

icon.addEventListener('click', ()=> {
    icon.classList.add('-rotate-[360deg]', 'duration-700');
    const delay = setTimeout(() => {
      icon.classList.remove('-rotate-[360deg]', 'duration-700');
    },700);
});

これでイメージ通り、クリックするたびにくるんと回転するようになりました。
かわいいいい！！😍
いろんなもの回したいね！

余談

なお、Tailwind CSSのtransitionクラス群は、自動的にtransition-duration: 150ms;が付与される仕様となっています。
これを使用しているときにDOMで打ち消すには、.duration-0をさらに付与する必要があります。