tailwindcssでborderアニメーションを実装する。

今日はtailwindcssでボーダーアニメーションを実装する方法についてまとめていきたいと思います。
わかりにくいですがイメージは以下のような感じです。

before

after


写真だけではなかなか伝わりませんが、実際は要素をホバーすると左からボーダーが出現するようなアニメーションになっています。

それでは実際の実装方法を解説していきます。
tailwindcssだとめちゃめちゃ簡単に実装できます。

実装したコード

PRODUCTSの文字の部分だけコードを抜き出してみると以下のような感じです。

<div class="flex flex-col group overflow-hidden">
  <a href="/products">PRODUCTS</a>
  <span class="mt-[4px] transition ease-in duration-800 relative right-full transform group-hover:translate-x-full bg-gray-600 w-full h-[2px] rounded-[4px]"></span>
</div>

「[]」でpx指定ができているのは、tailwindcssのJITモードを導入している為です。(具体的な導入方法も記事書きたい)

なんか色々書いてありますが、
borderアニメーションを実装するにあたって重要となってくるのはこの辺の奴らです。

• group
• transition
• transform

一つずつ説明していきます。

group

https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover

tailwindcssのgroupはgroup-hoverと合わせて使います。
以下はtailwindcss公式からの引用です。

特定の親要素にホバリングしたときに子要素にスタイルを設定する必要がある場合は、親要素にgroupクラスを追加し、子要素のutilityにgroup-hover: プレフィックスを追加します。

つまり、groupとgroup-hoverを使えば、「ある親要素がhoverされた時の子要素の挙動」を設定することができると言うことです。

groupのありがたみを理解するために、まずはgroupを使わない場合を再現してみたいと思います。

例えば、「要素がhoverされた時にボーダーを出現させたい」と思った時、groupを使わない場合は以下のように実装することになります。

<div class="flex flex-col">
  <a href="/products">PRODUCTS</a>
  <span class="invisible hover:visible bg-gray-600 w-full h-[2px] rounded-[4px]"></span>
</div>

「invisible hover:visible」は、「通常は非表示にしておくよ。hoverされた時は要素を表示するよ」と言う意味です。
「hidden hover:block」との違いは、「ただ見えなくなるだけ」というところです。
hover時とそうでない時にレイアウトに影響を出したくない場合は「invisible hover:visible」を積極的に使っていくのがいいですね。

気づいた方もいるかもしれませんが、これだとボーダーを表現しているspan要素をピンポイントでhoverしないとボーダーの出現を表現することができません。

このような時にgroupとgroup-hoverを使います。

<div class="flex flex-col group">
  <a href="/products">PRODUCTS</a>
  <span class="invisible group-hover:visible bg-gray-600 w-full h-[2px] rounded-[4px]"></span>
</div>

a要素とspan要素をラッピングするdivタグにgroupを指定し、span要素にgroup-hover:visibleを指定しました。
このようにすることで、親要素であるdiv要素がhoverされた時にspan要素が出現するようになります。いい感じですね。

transition

transitionは、要素の変化をフワッとさせたい時に使うクラスです。

例えばtransitionを使わずに、「hoverしたら要素の背景色が変わる」みたいな実装をしたいときは以下のようなコードになります。

<div class="bg-red-200 hover:bg-blue-200">
  こんにちは
</div>

しかしこれだとhoverした瞬間に背景色がパッと切り替わる感じになりますよね。

これをフワッといい感じにしたいときにtransitionを使います。
以下のような感じです。

<div class="transition duration-500 bg-red-200 hover:bg-blue-200">
  こんにちは
</div>

「duration-500」というのは、遷移する期間を表しています。数字が大きければ大きいほど長い時間をかけてフワッとしてくれるイメージです。

ease-inとか、ease-outとかを使えば遷移の仕方を指定できるようになります。
遷移の度合いというか、グラフの形が変わるイメージです。
最初は遅くて後は早いとか、最初は早くて後はゆっくりみたいなのを指定できます。

<div class="transition duration-500 ease-in bg-red-200 hover:bg-blue-200">
  こんにちは
</div>

詳しく知りたい方はtailwindcss公式をご覧ください。
https://tailwindcss.jp/docs/transition-timing-function

transform

transformは要素自体の変化を表すことができるクラスです。

「hoverしたら要素を右にずらしたい」とか「hoverしたら要素を拡大したいとか」そう言った時に使います。
hover時じゃなくても、単純にレイアウトを調整したい時にも使うことができます。

試しに、「要素をhoverしたら右にずれる」という実装をしてみたいと思います。

<div class="transform hoverr:translate-x-5">こんにちは</div>

「要素をhoverしたら拡大される」だとこんな感じですね。
scaleを使用します。

<div class="transform hover:scale-125">こんにちは</div>

「hoverしたら回転する」とかだとこんな感じです。
rorateを使用します。

<div class="transform hover:rorate-45">こんにちは</div>

別にhoverはつけなくてもレイアウト調整したいだけの時にも使えます。

<div class="transform translate-x-5">こんにちは</div>

そしてこれら3つをいい感じに組み合わせて実装したのが最初に紹介したボーダーアニメーションです。

<div class="flex flex-col group overflow-hidden">
  <a href="/products">PRODUCTS</a>
  <span class="mt-[4px] transition ease-in duration-800 relative right-full transform group-hover:translate-x-full bg-gray-600 w-full h-[2px] rounded-[4px]"></span>
</div>

言葉で説明すると、

1. アニメーションさせたいボーダをrelativeで左側にずらしておく。
2. 左側にずらしたボーダーはoverflow-hiddenで隠しておく。
3. ボーダーを表現するspan要素だけでなく、親要素がhoverされた時にもアニメーションを発火させたいので、親要素にgroupを指定して、span要素に「tranform group-hover:translate-x-[100%]」を適用。
4. ボーダーをにゅっと出したいので、「transiton ease-in duration-800」を適用。

こんな感じでhoverすると左側からにゅっと出てくるボーダアニメーションの完成です。

最後までごらんいただきありがとうございました！