我是第一次实施 Desandro Masonry。我有一个使用 Masonry v3 和 InfiniteScroll 的功能实现。在容器底部添加新元素时的过渡正在淡入并从 0px 增长到适当的大小。
我已经看到很多使用浏览器窗口边缘的飞入效果对旧版本的引用。有没有办法用新版本实现这个过渡？
我怀疑关键在于 visibleStyle 和 hiddenStyle 参数，但我不知道我需要将它们设置为什么。
visibleStyle 和 hiddenStyle 的默认值：
visibleStyle: { opacity: 1, transform: 'scale(1)' },
hiddenStyle: { opacity: 0, transform: 'scale(0.001)' }
我的代码：
//Singleton for handling layout
var bvtPageLayout = {
masonry : null,
initialize : function () {
//init masonary layout
var masonaryArguments = {
columnWidth: '.column-sizer',
gutter: '.gutter-sizer',
itemSelector: '.recipe',
transitionDuration: '1s',
visibleStyle: { opacity: 1, transform: 'scale(1)' },
hiddenStyle: { opacity: 0, transform: 'scale(0.001)' }
};
$('.recipes.masonry').masonry(masonaryArguments);
bvtPageLayout.masonry = $('.recipes.masonry').data('masonry');
//init infinitescroll
var numberPages = $('ul.pager li a').length;
$('.recipes.masonry').infinitescroll({
loading: {
img : "",
msgText : "<em>Loading...</em>",
finishedMsg : "<em>No more recipes.</em>"
},
state: {},
debug: true,
navSelector : "ul.pager",
nextSelector : "ul.pager a.next",
itemSelector : ".recipes.masonry",
maxPage : numberPages
},
function(newContent) {
bvtPageLayout.masonry.appended( newContent );
}
);
}
}