ScrollReveal.js

Question

有没有一种方法可以通过单击事件来显示带有滚动显示的所有项目？ 也许显示所有功能？

问题：

我正在使用滚动显示和同位素。同位素的排序功能对滚动显示有奇怪的反应。

当我单击 "filter" 按钮时，我正在调用同位素函数 filter。

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

但是，如果我在单击所述文件管理器按钮后向下滚动，我的网格中就会出现漏洞，我必须在通过滚动显示所有项目后"re-click"按钮

谢谢！！

更新

我在这里添加了布局调用 - 这至少修复了之前存在的漏洞：

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

但是 - 新过滤的项目不会 "fade in" 像滚动一样显示它们 "tile in" 同位素的样式。理想的情况是 reveal all 和 layout 场景 - 这样你就不会注意到动画中的任何差异 - 或者另一种情况可能只是简单的无论点击过滤器如何，都会不断淡入。

更新更新

我们决定让所有的瓷砖高度相同，这样就不会再遇到这个问题。

谢谢

Answer 1

Isoptope 有一个叫做relayout 的功能。你可以这样使用它 $grid.isotope( 'reLayout', callback )

您可以阅读文档 here

考虑到您遇到的问题，此功能可能更有用。

但是，具体回答你的问题： Isotope 只是添加了一个 class 来隐藏项目，因此您可以 'reset' 通过使用这样的函数

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

ScrollReveal.js — 在点击或事件时显示所有项目？

ScrollReveal.js — Reveal All items on Click or Event?

javascript

jquery

jquery-isotope

jquery-events