3

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

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

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

我试过了

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

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

4

2 回答 2

7

好的，我在这里找到了解决方案： 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();
  }
});

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

于 2013-10-11T20:23:42.727 回答
3

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

Masonry 默认使用：

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

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

  // Initialize Masonry
  $('#container').masonry
    itemSelector: ".item",
    hiddenStyle: { opacity: 0 }
于 2014-10-14T23:12:20.147 回答