Tailwindを使ったアニメーション
おばんです。
最近Nextを使って個人開発をしておりUIには勉強がてらTailwindを使っています。正直css自体かなり苦手でGPTとかに頼りながらやっている感じです。(GPTとかVercelあるし勉強する優先度低いんじゃね?)
Tailwindということで各種コンポーネントは全部自前で実装しているのですが、Alertコンポーネントを作るときにちょっと躓きました。Alertってあれです。左下とか画面上側から生えてくるアレです。あれを実行するってことはアニメーションを付与させなきゃいけないわけでして、Tailwindでどうやったかをここに記載していきます。最終的にこんな感じになりました。
正直アニメーションということでだいぶ敬遠していましたが、そんなに難しいことでもありませんでした。
今回つ実装したアニメーションはフェードインとフェードアウト。この2つはTailwindではデフォルトで設定されていなさそうなので自分で定義する必要がありました。実装は簡単で tailwind.config.tsのthemeに設定するだけでした。
import type { Config } from 'tailwindcss';
const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}'
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
},
colors: {
primary: '#001F3F',
'primary-light': '#334d66',
'primary-dark': '#000f28',
secondary: '#F0F0F0',
'secondary-light': '#fafafa',
'secondary-dark': '#c2c2c2',
success: '#76F994',
'success-light': '#a0fcb3',
'success-dark': '#4cc76f',
error: '#F44336',
'error-light': '#f77166',
'error-dark': '#c12e1c',
info: '#17a2b8',
'info-light': '#4db5d3',
'info-dark': '#136f86'
},
animation: {
'fade-in': 'fadeIn 0.5s ease-out forwards',
'fade-out': 'fadeOut 0.5s ease-out forwards'
},
keyframes: {
fadeIn: {
'0%': { transform: 'translateY(100%)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' }
},
fadeOut: {
'0%': { transform: 'translateY(0)', opacity: '1' },
'100%': { transform: 'translateY(100%)', opacity: '0' }
}
}
}
},
plugins: []
};
export default config;
このコンフィグファイルでthemeのextendに記載するだけでよく、あとはclassNameにfade-inやfade-outをつけるだけで先ほどの画像のようになります。今回の実装を言語化するとこんな感じです。
アニメーション(fadeIn)が0.5秒間(0.5s)かけて発生し、始まりは速く、終わりに向かって徐々に遅くなる(ease-out)ペースで進行。アニメーションが終了すると、要素はアニメーションの最終状態を保持し続ける(forwards)。
といったところでしょうか。こういうのをちょっとずつでもできるようになっておくとUIの実装の幅も広がりますね。
昨今だとKuma UIなどSSRでも動くUIライブラリがありますが、たまには自分で実装すると色々勉強になっていいですね。