ScrollReveal.js - 在點擊或事件中顯示所有項目？

有沒有辦法用click事件顯示滾動顯示的所有項目？也許一個揭示所有功能？ScrollReveal.js - 在點擊或事件中顯示所有項目？

問題：

我使用的滾動顯示以及同位素。同位素的排序功能與滾動顯示反應異常。

當我點擊一個「過濾器」按鈕，我打電話給同位素功能過濾器。

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

但是如果我向下滾動，點擊文件管理器說按鈕有我的網孔後，我必須「再點擊」通過滾動

感謝所有項目後，該按鈕已被揭露出來！

更新

我已經在這裏添加了佈局呼叫 - 這至少解決了存在前孔：

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

但是 - 新過濾的內容並非「淡入」作爲他們通過滾動顯示他們「像瓷磚一樣」，就像同位素的造型一樣。理想的情況是顯示所有和佈局場景 - 這種方式你不會注意到動畫的任何區別 - 或者其他情況可能只是簡單的恆定衰落，無論點擊哪個過濾器。

更新更新

我們決定把所有相同的高度，不再遇到此問題的瓷磚。

謝謝

來源

2016-09-09 Radmation

等功能函數有一個叫做relayout的函數。您可以使用它像這樣$grid.isotope('reLayout', callback)

您可以閱讀文檔here

此功能可能是給你所遇到的問題更多的使用。

然而，具體回答你的問題：同位素只是增加了一類隱藏的物品，所以你可以使用這樣的函數

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

來源

2016-09-12 19:49:59 Mike

它看起來像「重新佈局」更名爲「復位」 '佈局'。此外，它似乎沒有工作。看起來我很快就會談到。我得到一個控制檯錯誤和過濾沒有被應用，所以當然，當我滾動下來沒有差距 - 因爲沒有過濾發生！感謝您的幫助。 – Radmation

我不認爲這些都會工作，因爲scrollReveal將這些項目添加到「隱藏的元素」位置：絕對; 剩餘：49.9638％; top：990px; 知名度：可見; transform：translateY（20px）scale（0。9）; 不透明度：0; background：url（「http://functionfindsform.com/UCUT/wp-content/uploads/2016/07/past-present-future-1.jpg」）;'我認爲變形和不透明度是干擾？不知道爲什麼'佈局'不會影響這些。 – Radmation

使用afterReveal回調可以在scrollreveal函數之後輕鬆完成重新佈局。或者，您只能通過將其應用到適用的容器上，才能在需要的元素上使用顯示。即：sr.reveal（'。bar'）; – Mike

ScrollReveal.js - 在點擊或事件中顯示所有項目？

回答

相關問題