javascript - 逐步淡入淡出无限滚动附加元素

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