web-dev-qa-db-ja.com

isotope.jsの軽量代替

私は isotope.js を使用していますが、これは単に要素を追加/削除するためのアニメーションのためです。

削除された要素がフェードアウトするときに、削除された要素の位置を同時に埋めるようにアニメーション化するアイテムの効果が気に入っています。

実は、私のグリッド要素はすべて同じサイズで固定されており、フィルタリングは必要ありません。アイソトープは、その機能の幅が広いためか、少し不格好だと思います。

だから私は次の代替案を探しています:

  • 軽量
  • スリック
  • 堅牢で生産準備完了
  • 優雅に低下することができます
12
eye_mew

元の答え

誰かがまだ探している場合は、私が書いた同様のjQueryプラグインFilterizrも調べてみてください。 Filterizrは:

  • filteringsortingshufflingおよび検索
  • 高度にカスタマイズ可能(ユーザーがフィルタリングでフィルタリングするときに、遷移に独自のCSS効果を書き込むことができます)
  • CSS3トランジションとtransform-translateを使用します。
  • 軽量、〜20kb
  • モバイルパフォーマンス用に最適化
  • レスポンシブ(メディアクエリを使用)
  • オープンソースおよび[〜#〜] mit [〜#〜]ライセンス

Filterizr Website でリンク、チュートリアル、ドキュメントをダウンロードします


更新06/2019:

Filterizrはそれ以来長い道のりを歩んできました。

TypeScript JavaScriptで記述され、jQueryなしでVanilla JavaScriptライブラリとして使用できます。

JQueryプラグインとしての使用は引き続き可能ですが、FilterizrのWebサイトは最新であるため、引き続き参照できます。

26
giotiskl

jQuery Masonry を探しているようです。

一般的に、アイソトープはほとんどの場合、非常に滑らかです。もちろん、すべてのコンテンツに投射するコンテンツの量によって異なります。

不格好さの背後にある理由は、jQuery自体かもしれません。 jQueryは素晴らしいセレクターですが、ライブラリに含まれる機能の量が非常に多いため、アニメーションと操作の速度は少し欠けています。

6
cowcowmoomoo

誰かがまだチェックアウトしている場合は、 Shuffle.js をチェックしてください。 MITライセンスと一緒に応答します。

6
Maverick

私はまた、アニメーション付きの広範なフィルターを備えているものを検索しています:

Muuri-オープンソースMIT (高速で良いようです)

MixitUp-高品質の商用ライブラリ (非常に洗練された)

他のオープンソースは両方の機能を備えていないか、オプションで拡張可能です。Macy.js、gridfolio、Tympanus CSS(+含まれている、-含まれていない)などの高速アニメーションのみが必要な場合に適しています。

4
Edward Chan JW

私はかなり素晴らしくて簡単なjquery Quicksandを使用しています http://razorjack.net/quicksand/

3
Adal arasu