【Rails・tailwindcss】flashメッセージにanimationを付与する方法

はじめに

この記事の概要

こんにちは、株式会社TOKOSのたくまです！

ログイン時や何らかのデータを更新した後にflashメッセージを表示させる方も多いかと思います。
その際にanimationを付与してより目立たせたいと思うことはありませんか？
今回はフェードインするflashメッセージを例に、
tailwindcssを使用してflashメッセージにanimationを付与する方法を紹介します！
また、今回はRuby on Railsを使用して実装しています。

今回作成するflashメッセージは下のものになります。

基本的なflashメッセージの作成方法については以下のサイトが参考になるかと思います。

また、今回はCSSのkeyframesを使用してanimationを付与していきます。
keyframesの使用方法については以下のサイトをご覧ください。

対象読者

animationを付与するための準備

keyframesを記述する

flashメッセージにanimationを付与するために、tailwindcss.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行目のfalshFadeがアニメーションの名前になります。どのような動きをするのか分かりやすい命名にすることをオススメします。
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名を使用することが可能になります。このcalss名を付与することで、keyframesで指定した動きを行ってくれます。

flashプロパティの中の記述について解説していきます。
最初のflashFadeはkeyframesで作成したanimationの名前です。
次の7.0sですが、これは作成したanimationを何秒かけて実行するかの記述です。上記の例では7秒かけてアニメーションを実行することになります。
最後にforwardsですが、animation終了時にその状態のスタイルを適用する記述です。上記の例ではkeyframes 内の100%の記述、つまり元の位置で何も表示されない状態が適用されることになります。
forwards以外にも0%時点のスタイルを適用するbackwardsなどがあります。
これらの指定方法については以下のサイトが参考にしてみてください。

animationを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を自作する方法を紹介しましたが、tailwindcss用の animationコードを自動生成してくれる便利なサイトがあります。それがTailanimistaです。
こちらのサイトでは、カスタマイズ可能な様々なアニメーションが用意されています。

サイトにアクセスすると上記のような画面になるので、ここから好みのanimationを見つけましょう。
好みのanimationを選択した状態で右上の</> をクリックするとkeyframesとanimationのコードを表示してくれます。

あとは上で紹介したように、tailwindcss.config.jsにコードを記述して、animate-XXXのようなclass名を対象に記述することで、animationを付与できます。

さいごに

今回はtailwindcssを使用してflashメッセージにanimationを付与する方法を紹介しました。
改めて手順を紹介します！

これで簡単にanimationを付与することが出来ます。
今回はフェードインを例として作成しましたが、記述次第で他にも様々な表現が出来るので、ぜひお試し下さい！

もっとHTMLやcssについて理解を深めたいという方は以下の書籍がおすすめです。
HTML と css、Webデザインの基礎知識、最新コードの書き方、デザインの注意点などが一度に身に付きます。

スポンサーリンク