ScrollReveal.js - クリックまたはイベントのすべてのアイテムを公開しますか？

Question

clickイベントでスクロールの表示を含むすべてのアイテムを表示する方法はありますか？恐らくすべての機能を明らかにするでしょうか？

問題：

私はスクロール明らかにするだけでなく、同位体使用しています。アイソトープのソーティング機能は、スクロール表示と奇妙に反応します。

「フィルタ」ボタンをクリックすると、アイソトープ関数が呼び出されます。

私は私のグリッドに穴があると述べたファイラ]ボタンをクリックした後、下にスクロールして、私は

感謝をスクロール経由ですべての項目の後にボタンが明らかにされている「再クリック」する必要があるしかし場合

$grid.isotope({filter: '.fish-filter'}); // example 

!!

更新

私はここで、レイアウトの呼び出しを追加している - これは、少なくとも前に存在していた穴が修正されています。

window.sr = ScrollReveal({ 
    beforeReveal: function (domEl) { 
     //$grid.isotope('layout'); // fixes holes 
    }, 
    afterReveal: function (domEl) { 
     $grid.isotope('layout'); 
    } 
}); 

しかし - 新規フィルター項目は、「フェードイン」していないとして、彼らは同位体からのスタイリングのように、スクロールして「タイル・イン」しています。理想的な状況はとのレイアウトシナリオを明らかにする - アニメーションの違いに気づくことができない - あるいは、クリックされたフィルタにかかわらず、単純な定数フェードインである可能性があります。

アップデートアップデート

は、私たちは、同じ高さがそうもはや問題が発生しているすべてのタイルを作ることにしました。

ありがとう

Answer 1

Isoptopeには、再レイアウトと呼ばれる機能があります。 あなたはこの機能は、あなたが経験している問題を与え、より有用であり得るドキュメントhere

を読むことができるこの$grid.isotope('reLayout', callback)

のようにそれを使用することができます。 同位体は、単に項目を非表示にするクラスを追加しますので、あなたはそれが改名された「再レイアウト」のように見えるこの

$('button').on('click', function() { 
    //You can reset the CSS 
    $('.isotope-hidden').removeClass('isotope-hidden'); 
    //Or you can use the isotope filter reset. 
    $grid.isotope({ filter: '*' }); 
});