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

Posted 2023-03-05

【中文标题】逐步淡入无限滚动附加项目

【英文标题】：Step fade Infinite Scroll appending of items

【发布时间】：2018-08-09 15:30:49

【问题描述】：

我正在使用 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',
    );         
);

【问题讨论】：

什么是“无限滚动功能”？你的问题不够清楚..你能解释更多你需要做什么吗？

@SeReGa 就像无限变焦

在 jsfiddle 中发布您的代码示例。

看看codepen.io/desandro/pen/QgMWzV来自：infinite-scroll.com/extras.html#loading-json

【参考方案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