j查询砌体附加项目而不"growing"动画

Question

我正在使用Masonry并附加一些项目($boxes是一堆包含div的HTML(

$('#masons').append($boxes).masonry('appended', $boxes, false);

这有效 ->新的div由共济会正确组织。但是，它包含一个烦人的动画，其中盒子从其位置的中心"生长"。我不想要这个动画。我怎样才能摆脱它？

我试过了

$('#masons').append($boxes).masonry('reload');

但这似乎根本不起作用——>新的div 不是由共济会组织的。

Answer 1

好的，

我在这里找到了解决方案：https://github.com/desandro/masonry/issues/183

我必须设置transitionDuration: 0

所以完整的代码是...

// Initialize Masonry
$('#masons').masonry({
  columnWidth: 127.5,
  itemSelector: '.mason-block',
  transitionDuration: 0
});
// Generate boxes and then append them
$('#masons').append($boxes).masonry('appended', $boxes, true);
// Custom fading animation
$('.mason-block img').on('load', function() {
  $(this).fadeIn(250);
}).each(function() {
  if(this.complete) {
    $(this).load();
  }
});

现在它们很好地淡入而不是"增长">

Answer 2

我同意。在附加新项目时，我不是标准动画的忠实粉丝，而不是使用"transitionDuration： 0"，我发现使用 hiddenStyle 选项更整洁。

砌体默认使用：

hiddenStyle: {
  opacity: 0,
  transform: 'scale(0.001)'
}

您可以在初始化期间传递自己的版本，在这里我删除了将禁用"增长"动画的缩放选项。

  // Initialize Masonry
  $('#container').masonry
    itemSelector: ".item",
    hiddenStyle: { opacity: 0 }