初めて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 );
}
);
}
}