トースト通知（成功・エラー・情報）
これは画面の隅にふわっと現れて自動で消えるトースト通知で、成功・エラー・情報の 3 種を出し分けます。 tnShow(メッセージ, 種類) を呼ぶと tn 要素を新しく作り、 tn--success などの修飾クラスで色を決めてコンテナへ追加します。
解説
これは画面の隅にふわっと現れて自動で消えるトースト通知で、成功・エラー・情報の 3 種を出し分けます。tnShow(メッセージ, 種類) を呼ぶと tn 要素を新しく作り、tn--success などの修飾クラスで色を決めてコンテナへ追加します。登場は @keyframes tn-in で右からスライドイン、3 秒後に tn--out を付けて tn-out でスライドアウトし、animationend を once で待って要素自体を remove() します。コンテナは position:fixed で右下に固定され、複数出すと縦に積み重なります。
使う場面
- 保存や送信が完了したことをさっと知らせたいとき
- 入力エラーや通信失敗を画面を遮らずに伝えたいとき
- 処理中・更新中といった状況を控えめに通知したいとき
色は各 tn--* クラスの背景を変えれば調整でき、表示時間は setTimeout の 3000 を増減させて変えられます。出てくる方向はアニメーションの translateX を反転すれば左からにも変更可能です。注意点として、重要な通知を読み上げにも伝えたい場合は、コンテナに role=status や aria-live を付けると親切です。消えたトーストは DOM から取り除かれるので残りません。
よくある質問
トーストが表示される時間を長くできますか？
できます。tnShow 内の setTimeout に渡している 3000 ミリ秒を増やせば長く、減らせば短く表示されます。消えるときのアニメーション時間とは別に調整できます。
通知の種類を増やしたいときはどうしますか？
tn--warning のような新しい修飾クラスを CSS に追加し、その種類名を tnShow の第 2 引数に渡すだけです。色やアイコンはそのクラスで指定します。