2016-06-03 5 views
0

멋진 레이아웃 기능으로 Isotope를 사용하고 있습니다. Ajax를 통해 새 항목을 가져 오는 호출이 있는데, 이전 항목이 제거되고 새 항목이 앞에 추가됩니다. 애니메이션은 정말 매끄럽게 보입니다. 그러나 애니메이션이 완료되면 콜백을받을 수 없습니다. 동위 원소 이벤트가 실행되지 않습니다.

나는 자신의 사이트에 자신의 문서에서이 사용을 시도하고있다 : 나는 이런 식으로 구현 한

$grid.on('arrangeComplete', onArrange); 

:

$grid = $('#grid').isotope({ 
     itemSelector: '.item' 
}); 

$grid.on('arrangeComplete', function(){ 
    console.log('arrangeComplete') 
}); 

그러나 이것은 단지 나를 위해 작동하지 않습니다. 사건은 결코 해고되지 않습니다. 내가 애니메이션의 완성하지만, 내가 가지고있는 문제에 대한 잘못된 이벤트를 사용하고있는 경우

//Remove 
$grid.isotope('remove', removeItems); //removeItems being a var this works fine 

//Add 
$grid 
    .prepend(assets) 
    .isotope('appended', assets) 
    .isotope('reloadItems') 
    .isotope({sortby: 'original-order'}); 
//again this all works fine 

잘 모르겠어요은 아무도이다 :

나는 새로운 항목을 제거하고 붙이는 두 가지 기능을 가지고 그들은 해고 된 것 같습니다. 순간

나는 장소에서 해킹이 있습니다

$grid.bind("transitionend", function(){ 

해킹의 작품을하지만 그것이 발사 얼마나 많은 항목 페이지에 따라 의미 각 요소 전환의 말에 이벤트를 트리거 그들의 전이가 모두 제거되고 다음 항목의 모든 전이가 앞에 붙습니다. 이것은 분명히 나를위한 문제입니다.

이 문제에 대한 도움이나 조언을 보내 주시면 감사하겠습니다.

+0

'function() {}'또는 DOM 준비에서 코드를 래핑 했습니까? –

+0

예, 모두 지우기, 추가 및 인스턴스 초기화를위한 별도의 함수로 나뉩니다. 그것의 초기화에 실제로'.on ('arrangeComplete'... ')이 포함되어 있습니다. – ThePagan

+0

이 말은'$ (document) .ready ({$ grid.isotope ({...})})' –

답변

0

이전에는 reloadItems 메서드가 실행되지 않아서 동적으로 추가 된 항목이 오른쪽 상단 모서리에 쌓이면서 문제가 발생했습니다. - 어쩌면 다른 사람이 설명 할 수있는 두 번째 .isotope()가 필요한 이유

$grid.isotope('reloadItems').isotope(); 

나는 아무 생각이 : 그것을 호출하는 몇 가지 이유를 들어 다음과 같은 방법으로 작동하는 것 같다.

+0

여기 플러그인 작성자의 설명이 있습니다 (몇 년 전이지만) : https://github.com/metafizzy/isotope/issues/238 –