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: {
  opacity: 0,
  transform: 'scale(0.001)'
}

初期化中に独自のバージョンを渡すことができます。ここでは、「成長」アニメーションを無効にするスケール オプションを削除しています。

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