我使用的同位素的砌体布局旁边无限滚动，通过点击一个按钮启动。
我想动画/过渡每个.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',
});
});
看来，你是非常接近。
如果你希望每个新加载的项目中使用褪色幻灯片，只需修改您的砖石初始化代码：
$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库的例子使用一探究竟。