Question

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

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

这有效 - ＆gt;新的div由砌体正确组织。然而，它包括一个恼人的动画，其中框从其位置的中心“增长”。我不想要这个动画。我怎么能摆脱它？

我试过

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

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

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

我同意。在添加新项目时，我不是标准动画的忠实粉丝，而不是使用＆transition; TransitionDuration：0＆＃39;我觉得使用hiddenStyle选项比较简洁。

砌体默认使用：

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

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

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

jQuery Masonry附加没有“增长”动画的项目

2 个答案: