Я внедряю Desasonro 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 );
}
);
}
}
Я понял решение. Я использовал перекрестный переход CSS3, сложный с эффектами масштабирования и прозрачности, которые уже были на месте.
Вот обновленные затронутые параметры:
visibleStyle: { opacity: 1, transform: 'translateX(0px) scale(1)' },
hiddenStyle: { opacity: 0, transform: 'translateX(-800px) scale(0.10)' }