FLIPアニメーションを使ったアイテム検索機能を実装してみよう～ハイライト機能を添えて～
こんにちわ。nap5です。
FLIPアニメーションを使ったアイテム検索機能を実装してみたので、紹介したいと思います。
ハイライト機能では以下のライブラリを使用しています。
FLIPアニメーションライブラリでは以下を使用しています。
FLIPアニメーションではなにがしかのイベント駆動で変化するステートをトリガーに単一のDOM要素が2つの状態を遷移することで得られるアニメーションです。
このFLIPアニメーションを検索機能で実現するとなると少し工夫が必要になるので、デモを用意してみました。実装のポイントとしてはアイテムごとにIDを振っておき、タグごとにグルーピング名を定義しておくことですかね。
デモサイトです。
デモコードです。
検索ボタンを押した後、Fixedで固定した領域にタグを並べてインタラクティブに絞り込むUIなどはFLIPアニメーションの特性を生かせそうですね。次回はこれにチャレンジしてみたいですね。
最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。
また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。
最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。
また、コースの内容紹介記事は以下になります。
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか？