jQuery Masonry 追加没有“增长”动画的项目答案

【问题标题】：jQuery Masonry append items without "growing" animationjQuery Masonry 追加没有“增长”动画的项目
【发布时间】：2013-10-11 19:58:47
【问题描述】：

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

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

这行得通 -> 新的 div 由 Masonry 正确组织。但是，它包含一个恼人的动画，盒子从其位置的中心“增长”。我不要这个动画。我怎样才能摆脱它？

我试过了

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

但这似乎根本不起作用 -> 新的 div 不是由 Masonry 组织的。

【问题讨论】：

如果我这样做$('#masons').append($boxes).masonry('reloadItems').masonry()，这将摆脱“增长”动画，但似乎每个 div 从左上角开始并移动到位，而不是立即开始到位

标签： jquery animation jquery-masonry

【解决方案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();
  }
});

现在它们很好地淡入而不是“增长”

【讨论】：

【解决方案2】：

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

砌体默认使用：

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

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

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

【讨论】：