【Rails・tailwindcss】flashメッセージにanimationを付与する方法
はじめに
この記事の概要
こんにちは、株式会社TOKOSのたくまです！
ログイン時や何らかのデータを更新した後にflashメッセージを表示させる方も多いかと思います。
その際にanimationを付与してより目立たせたいと思うことはありませんか？
今回はフェードインするflashメッセージを例に、Tailwind CSSを使用してflashメッセージにanimationを付与する方法を紹介します！
また、今回はRuby on Railsを使用して実装しています。
今回作成するflashメッセージは下のものになります。
基本的なflashメッセージの作成方法については以下のサイトが参考になるかと思います。
完全保存版！flashの使い方とbootstrapで表示する方法
railsのflashについて徹底解説しています。flashについての具体的な説明や使い方などこの記事を読めばflashを使いこなせることができます。また実際に表示をさせ、デザインを変える方法までもマスターすることができます。
pikawaka.comまた、今回はCSSのkeyframesを使用してanimationを付与していきます。
keyframesの使用方法については以下のサイトをご覧ください。
【CSS】animationと@keyframesの指定方法を完全解説 | ZeroPlus Media
CSSアニメーションはサイトにおしゃれな印象をつけるのに適した実装です。リッチな演出を実装できるようになればWeb制作のスキルは格段に上がります。CSSアニメーションを使用する場面は非常に多いので、レベルアップを図りたい方は学習してみましょう。この記事ではCSSアニメーションの使い方をわかりやすく解説しています。
zero-plus.io対象読者
- Tailwind CSSを勉強中の方
flashメッセージにanimationを付与したい方
animationを付与するための準備
keyframesを記述する
flashメッセージにanimationを付与するために、tailwind.config.jsに必要な記述をしてanimationを作成します。
まずはtheme内のextendにkeyframesを記述していきましょう！
今回は以下のように記述します。
theme: {
extend: {
keyframes: {
flashFade: {
"0%": { transform: "translateX(180px)", opacity: 0 },
"20%": { transform: "translateX(0)", opacity: 1 },
"80%": { transform: "translateX(0)", opacity: 1 },
"100%": { transform: "translateX(180px)", opacity: 0 },
},
},
},
}詳しく解説していきます。
4行目のflashFadeがアニメーションの名前になります。
どのような動きをするのか分かりやすい命名にすることをオススメします。
5行目から8行目が実際にどのような動きをするのか指定しています。
今回は画面の端からflashメッセージが横方向に180pxフェードインして、その後、画面端へフェードアウトする動きを指定しています。
また、0%と100%はanimation開始時と終了時のスタイルを、20%と80%はその間のスタイルを指定しています。
このように指定することで、なめらかなフェードインとフェードアウトを表現することができます。
animationを記述する
続いて、keyframesのすぐ下にanimationを記述していきましょう！
以下のように記述します。
theme: {
extend: {
keyframes: {
flashFade: {
"0%": { transform: "translateX(180px)", opacity: 0 },
"20%": { transform: "translateX(0)", opacity: 1 },
"80%": { transform: "translateX(0)", opacity: 1 },
"100%": { transform: "translateX(180px)", opacity: 0 },
},
},
animation: {
flash: "flashFade 7.0s forwards",
},
},
}こちらも解説していきます。
12行目をご覧ください。
flashですが、このように記述することでanimate-flashというclass名を使用することが可能になります。
このclass名を付与することで、keyframesで指定した動きを行ってくれます。
flashプロパティの中の記述について解説していきます。
最初のflashFadeはkeyframesで作成したanimationの名前です。
次の7.0sですが、これは作成したanimationを何秒かけて実行するかの記述です。
上記の例では7秒かけてアニメーションを実行することになります。
最後にforwardsですが、animation終了時にその状態のスタイルを適用する記述です。
上記の例ではkeyframes内の100%の記述、つまり画面外に移動し透明になった状態が適用されることになります。
forwards以外にも0%時点のスタイルを適用するbackwardsなどがあります。
これらの指定方法については以下のサイトを参考にしてみてください。
【CSS】animation-fill-modeの使い方・実行前後を指定する
animation-fill-modeとは、アニメーションの実行前後のスタイルを指定します。
shu-naka-blog.comanimationをHTMLタグに付与する
作成したclass名の付与
ここからはflashメッセージへanimationを付与していきましょう！
今回はflashメッセージを表示するにあたって_flash.html.erbという部分テンプレートファイルを作成し、スタイルをあてています。
<% flash.each do |key, value| %>
<% case key %>
<% when "notice" %>
<div class="animate-flash fixed top-24 translate-x-1/2 right-6 sm:translate-x-0 z-30 w-fit max-w-[90%] sm:max-w-1/2 py-4 px-6 flex justify-center items-center bg-white shadow-lg border border-line-100 rounded-[3px]">
<p class="text-base font-bold text-dark-blue-200 !leading-none"><%= value %></p>
</div>
<% when "alert" %>
<div class="animate-flash fixed top-24 translate-x-1/2 right-6 sm:translate-x-0 z-30 w-fit max-w-[90%] sm:max-w-1/2 py-4 px-6 flex justify-center items-center bg-white shadow-lg border border-line-100 rounded-[3px]">
<p class="text-base font-bold text-secondary-200"><%= value %></p>
</div>
<% else %>
<p class="alert alert-<%= key %>"><%= value %></p>
<% end %>
<% end %>4行目や8行目のdivタグ内にanimate-flashと記述することで、先ほど作成したanimationを付与しています。
あとはcontroller側でメッセージを呼び出せばanimationが付与されたflashメッセージを表示することが可能になります。
以上がflashメッセージにanimationを付与するための手順です！
Tailanimistaの紹介
ここまでanimationを自作する方法を紹介しましたが、Tailwind CSS用のanimationコードを自動生成してくれる便利なサイトがあります。
それがTailanimistaです。
こちらのサイトでは、カスタマイズ可能な様々なアニメーションが用意されています。
https://tail-animista.vercel.app/play/text/tracking-in/tracking-in-expand
tail-animista.vercel.appサイトにアクセスすると上記のような画面になるので、ここから好みのanimationを見つけましょう。
好みのanimationを選択した状態で右上の</>をクリックするとkeyframesとanimationのコードを表示してくれます。
あとは上で紹介したように、tailwind.config.jsにコードを記述して、animate-XXXのようなclass名を対象の要素に付与することで、animationを適用できます。
さいごに
今回はTailwind CSSを使用してflashメッセージにanimationを付与する方法を紹介しました。
あらためて手順を紹介します！
tailwind.config.jsにkeyframesを記述keyframesと同階層にanimationを記述- 作成した
animationをanimate-XXXというclass名で対象の要素に付与
これで簡単にanimationを付与することができます。
今回はフェードインを例として作成しましたが、記述次第で他にも様々な表現ができるので、ぜひお試しください！
この記事を書いた人
