Поддерживает ли Masonry v3 переходы при добавлении элементов?

0

Я внедряю 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 );                       
                }
            );
        }
    }
Теги:
jquery-masonry

1 ответ

1
Лучший ответ

Я понял решение. Я использовал перекрестный переход CSS3, сложный с эффектами масштабирования и прозрачности, которые уже были на месте.

Вот обновленные затронутые параметры:

        visibleStyle:   { opacity: 1, transform: 'translateX(0px) scale(1)' },
        hiddenStyle:    { opacity: 0, transform: 'translateX(-800px) scale(0.10)' }

Ещё вопросы

Сообщество Overcoder
Наверх
Меню