Masonry : 새 항목을 추가 할 때 기본 애니메이션을 페이드 인으로 변경하는 방법은 무엇입니까?

Question

더 많은 게시물이로드 된 후 벽돌 그리드에 게시물을 추가하는 3 열 벽돌 레이아웃을 만들기 위해 Malinky의 플러그인 "Ajax Pagination and Infinite Scroll"플러그인과 함께 WordPress의 아카이브 페이지에서 Desandro의 벽돌을 사용하고 있습니다. 그러나, 나는 벽돌의 기본값이되는 상단/왼쪽 모서리에서 그것들을 밀어 넣음으로써 덧붙여지는 새로운 게시물 세트의 시각 효과를 좋아하지 않는다. 대신, 나는 그들이 바닥에 하나씩 퇴색하고 싶다.

새 게시물을 올바른 위치에서 시작하도록하기 위해 transitionDuration을 0으로 설정하려고했으나로드 된 후 계속해서 페이드 인하는 데 성공하지 못했습니다. ,

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

Answer 1

좋아, 그래서 나는 그것을 알아 냈 :

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

참고 : :이 콜백을 사용하고 무한 스크롤 플러그인 내부

지금까지 나는 단지이 함께 일해야 만약 다른 사람이이 문제에 부딪쳤다면. 초기 벽돌 기능과 ajax 플러그인 콜백 기능 모두에 대해 transitionDuration을 '0'으로 설정해야합니다. AJAX 콜백

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

})(jQuery); 

는

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

다음이

같이 jQuery를 통해 1 페이드 각 요소를 설정 한 다음, CSS 파일 내의 0 .grid 아이템 요소의 초기 투명도를 설정하고,

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

뿐만 아니라 아약스 콜백으로

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