jQuery的砌體追加項目沒有「成長」動畫

我使用的砌體和追加一些項目（$箱是一堆包含HTML的div）jQuery的砌體追加項目沒有「成長」動畫

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

此工程 - >新的div是由磚石組織正常。然而，它包含了一個令人討厭的動畫，其中盒子從其位置的中心「增長」。我不想要這個動畫。我怎樣才能擺脫它？

我已經試過

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

但是，這似乎並沒有在所有的工作 - >新的div不被磚石組織。

來源

2013-10-11 andrewtweber

如果我做'$（ '＃石匠'）。追加（$箱）.masonry（ 'reloadItems'）。磚石（）'，這擺脫了「成長」的動畫，而是出現每個div從左上角開始並移動到位，而不是立即開始 – andrewtweber

我同意。當追加新項目時，我不是標準動畫的忠實粉絲，而不是使用'transitionDuration：0'我覺得使用hiddenStyle選項更簡潔。

砌體默認使用：

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

您可以在初始化過程中通過自己的版本，我在這裏取下規模選項，將禁用「成長」的動畫。

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

來源

2014-10-14 23:12:20

好吧，我發現這裏的解決方案： 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-11 20:23:42 andrewtweber

jQuery的砌體追加項目沒有「成長」動畫

回答

相關問題