jquery - Masonry:如何更改添加新项目时淡入的默认动画？

Question

我在 WordPress 存档页面上使用 Desandro 的 masonry ，以及 Malinky 的“Ajax 分页和无限滚动”插件，以便创建一个 3 列 masonry 布局，在加载更多帖子后将帖子附加到 masonry 网格。但是，我不喜欢通过从砖石默认的左上角滑入来附加一组新帖子的视觉效果。相反，我希望它们在底部一一淡入。

我尝试将transitionDuration设置为0，以使新帖子从正确的位置开始，但除此之外，我没有成功让它们在加载后连续淡入。

到目前为止，我只能使用这个:

(function($) {
  $(window).load(function(){
    var $container = $('.grid');
    $container.imagesLoaded( function() {
      $container.masonry({
        itemSelector: '.grid-item',
        transitionDuration: '0s'
      });               
    });
  });   
})( jQuery );

注意:在无限滚动插件中，我使用此回调:

$('.grid').imagesLoaded( function() {
  $('.grid').masonry('reloadItems').masonry();
});

Answer 1

好的，所以我想通了，如果其他人遇到这个问题。您需要将初始 masonry 函数和ajax插件回调函数的transitionDuration设置为“0s”。

(function($) {
    $(window).load(function(){
        //masonry
        var $container = $('.grid');
        $container.imagesLoaded( function() {
            $container.masonry({
                itemSelector: '.grid-item',
                transitionDuration: 0
            });             
        });
    }); 

})( jQuery );

用于ajax回调

var $container = $('.grid');
$container.imagesLoaded( function() {
    $container.masonry('reloadItems').masonry({
        itemSelector: '.grid-item',
        transitionDuration: 0
    }); 
});

然后在 css 文件中将 .grid-item 元素的初始不透明度设置为 0，然后通过 jQuery 将每个元素设置为淡入淡出为 1，如下所示

jQuery(document).ready(function( $ ) {
    $('.grid-item').each(function(fadeInDiv){
        $(this).delay(fadeInDiv * 50).fadeTo(250, 1);
   });
});

以及ajax回调

$('.grid-item').each(function(fadeInDiv){
    $(this).delay(fadeInDiv * 50).fadeTo(250, 1);
});`