ScrollReveal.js - Odkryj wszystkie przedmioty w Click lub Event?

Question

Czy istnieje sposób na ujawnienie wszystkich przedmiotów z objawieniem przewijania za pomocą zdarzenia kliknięcia?Być może ujawniają wszystkie funkcje?

Problem:

Używam przewijania odsłonić jak izotopu. Funkcjonalność sortowania izotopów reaguje dziwnie na ujawnienie przewijania.

Po kliknięciu przycisku "filtr" wywołuję filtr funkcji Isotope .

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

Jednak gdybym przewijać po kliknięciu wspomnianego przycisku filer tam są dziury w mojej sieci i muszę „Ponowne kliknięcie” przycisk po wszystkie pozycje zostały ujawnione poprzez przewijanie

Dzięki !!

Aktualizacja

Dodałem połączenia układu tutaj - to przynajmniej naprawia dziury, które były obecne przed:

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

Jednak - nowo filtrowane elementy nie „Fade in” jako robią z przewijaniem, ujawniają, że "wkładają się", tak jak w przypadku stylizacji z izotopu. Idealną sytuacją byłby scenariusz ujawniający cały scenariusz i - w ten sposób nie można zauważyć żadnych różnic w animacjach - lub inna sytuacja może być po prostu stałym, stałym zanikaniem, niezależnie od klikniętych filtrów.

Aktualizacja Aktualizacja

Zdecydowaliśmy się wszystkie płytki na tej samej wysokości, więc nie występuje problem.

Dzięki

Answer 1

Isoptope ma funkcję zwaną relayout. mogą go używać jak to $grid.isotope('reLayout', callback)

Możesz przeczytać dokumenty here

Funkcja ta może być bardziej użyteczny ze względu na napotkanego problemu.

Jednak, aby odpowiedzieć na to pytanie, a mianowicie: Izotop prostu dodaje klasę do ukrycia rzeczy, więc może „reset” za pomocą funkcji jak ten

$('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: '*' }); 
});