逐步淡入无限滚动附加项目

Question

我正在使用 Isotope 的 Masonry 布局和 Infinite Scroll，它是通过单击按钮启动的。

我想为每个 .article 项目设置动画/过渡到位，但是我只能通过初始布局上的 CSS 来实现。有没有办法在每次运行无限滚动功能时创建这种“步进淡化”效果？

非常感谢。

HTML

<div class="articles">
    <div class="article">
    </div>
</div>

JQUERY

$('.articles').imagesLoaded(function () {
    // vars
    // Define grid
    var $grid = $('.articles');

    $grid.isotope({
        itemSelector: '.article',
        layoutMode: 'masonry',
        transitionDuration: 0,
        stagger: 500,
        hiddenStyle: { opacity: 0 },
        visibleStyle: { opacity: 1 }
    });

    var iso = $grid.data('isotope');

    // Init infinite scroll
    $grid.infiniteScroll({
        path: '.pagination .next a',
        append: '.article',
        outlayer: iso,
        loadOnScroll: false,
        scrollThreshold: false,
        button: '.load-more-button',
        hideNav: '.pagination',
        status: '.load-status',
    });         
});

Answer 1

看来你很亲近了。

如果您希望每个新加载的项目都以淡入淡出的方式滑入，只需修改您的砌体初始化代码：

$grid.isotope({
   itemSelector: '.article',
   layoutMode: 'masonry',
   stagger: 500,
   visibleStyle: { transform: 'translateY(0)', opacity: 1 },
   hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }
});

你的无限滚动代码

var $container = $grid.infiniteScroll({
    path: '.pagination .next a',
    append: '.article',
    outlayer: iso,
    loadOnScroll: false,
    scrollThreshold: false,
    button: '.load-more-button',
    hideNav: '.pagination',
    status: '.load-status',
});

这是在单击按钮时加载更多内容的逻辑：

viewMoreButton.on( 'click', function() {
  // load next page
  $container.infiniteScroll('loadNextPage');
});

它应该可以工作。

仔细看看官方的infiniteScroll库示例使用砖石和按钮。

• https://codepen.io/desandro/pen/eRRQVo
• https://infinite-scroll.com/#masonry-isotope-packery
• https://infinite-scroll.com/extras.html#button-behaviors