Tailwindcssで、棒状にアニメーションを入れてみました。
棒状の図は出てきたのですが、アニメーションが動きません。
なぜアニメーションが動かないのか調査した備忘録です。
Tailwindcssで書いた元々のコード
まず動かなかったコードを公開します。
<div class="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
<div id="rate-bar"
class="h-4 w-full rounded-full transition-all duration-700 bg-blue-500" style="width: 80%;">
</div>
</div>アニメーションはTailwindcss の transition-property の transition-all で指定しています。
trasition-all の定義はCSSでいう
- transition-property: all;
- transition-timing-function: var(–default-transition-timing-function);
（cubic-bezier(0.4, 0, 0.2, 1) と同じ） - transition-duration: var(–default-transition-duration);
（150ms と同じ）
の3つのプロパティを書いたのと同じ効果があります。
また、transition-duration が150ms だと早すぎると思い、
duration-700（transition-duration:700ms;）も合わせて指定しています。
このプロパティが指定されているのに、アニメーションが動かないのは何故？
原因：widthの指定がまずかった
原因は width の指定にありました。
やりたいこととしては、width を 0% を徐々に 80% にしてアニメーションしてもらいたかったのに、
画面が描画された時点で既にwidth が80%になっているので、何も変化が起きていない故、
アニメーションする対象がないと判断されていたようです。
どうすれば動かせる？
上記の理由から、0% → 80% に width を動かす必要があります。
これをやらないと trasition-all が発火しません。
手段①
考えた結果、HTMLでは0%、JavaScriptでページロードされた後に80% に変更する手段をとることにしました。
先述のHTMLに加えて、下記のJavaScriptを追加します。
document.addEventListener('DOMContentLoaded', () => {
const bar = document.getElementById('rate-bar');
bar.style.width = '80%';
});width を 変更したことで trasition-all が発火します。
やってみると、綺麗にアニメーションを動かすことが出来ました。
もっと綺麗にするなら
ページがロードされたと同時にアニメーションが動いてしまうので、
ページロード後、少し遅らせてからアニメーションを発火させる方法もあります。
document.addEventListener('DOMContentLoaded', () => {
const bar = document.getElementById('rate-bar');
setTimeout(() => {
bar.style.width = '80%';
}, 100);
});少しスタイリッシュな印象になりました。
手段②
styleを使わずに、クラスだけで制御する方法もあります。
（TailwindcssV4だと動かない場合があるのでおすすめはしません）
クラスは w-[number] を使います。
<div class="w-full bg-gray-200 rounded-full h-4 overflow-hidden">
<div id="rate-bar"
class="h-4 w-full rounded-full transition-all duration-700 bg-blue-500 w-0">
</div>
</div>document.addEventListener('DOMContentLoaded', () => {
document.getElementById('rate-bar').classList.add('w-[80%]');
});この方法で出来ない場合は手段①をおすすめします。
おわりに
今回は、Tailwindcss＋JavaScriptを使ったアニメーションをご紹介しました。
まとめると、
- transition は「変化」がないと動かない
- 初期値（0%）を用意 → JavaScript で後から変更
- Tailwind + style + JavaScript の合わせ技が正解
ということでした。
私のnpxで作ったTailwindcssのcssには transition-all や duration-700 が載っていなかったので、手動で追加しました。
もし動かない場合、これらのクラスがあるかどうかも確認してみてください。