Question

我是第一次实施Desandro Masonry。我有一个使用Masonry v3和InfiniteScroll的功能实现。在容器底部附加新元素时的转换正在逐渐消失并从0px增长到适当的大小。

我在浏览器窗口的边缘使用了一个fly-in效果，看过很多旧版本的引用。还有办法用新版本实现这种转换吗？

我怀疑键是在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 );                       
                }
            );
        }
    }

Answer 1

我找到了解决方案。我使用了translateX CSS3过渡，堆叠了已经存在的缩放和不透明效果。

以下是更新的受影响参数：

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

在附加元素时，Masonry v3是否仍支持fly-in过渡？

1 个答案: