jquery - 加载时的砌体动画

Question

嗨，我想在页面加载时在 mansonry 地方替换项目时获得动画，而不是在调整页面大小时，

这是我的代码：

  $(function(){
        var blogpost = $('#blogG');

         blogpost.imagesLoaded(function(){
                blogpost.masonry({
                         isAnimated: true,
                        animationOptions: {
                            duration: 750,
                            easing: 'linear',
                            queue: false
                        },
                        itemSelector:'.blogposts',
                        isResizable:true

            });
        }); 
});

和我的在线示例：www.mupiz.com/blog/

谢谢！

Answer 1

设置isResizable: false。它在Masonry 文档中。

Answer 2

接下来我制作onload动画。1 在砌体中向我的块添加类：
代码 css：

.box.masonry{
    -webkit-transition-property: left, right, top;
    -moz-transition-property: left, right, top;
    -o-transition-property: left, right, top;
    transition-property: left, right, top;

    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

并且在初始化砌体之后，从元素中删除这个类是浏览器调整大小转换的过程两次。
代码js：

$('.box.masonry').parent().bind( 'transitionend', function() {
    $('.box.masonry').removeClass('masonry'); 
});