javascript - Masonry v3 在附加元素时是否仍然支持飞入过渡？

Question

我是第一次实现 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 );                       
                }
            );
        }
    }

Answer 1

我想出了一个解决办法。我使用了一个 translateX CSS3 过渡，其中叠加了已经存在的缩放和不透明效果。

以下是更新后的受影响参数:

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