SnapSVG 애니메이션 콜백이 요소 집합에서 실행되지 않음

Question

JSfiddle을 참조하십시오!

나는과 같이 완료되면 콜백을 요소 세트를 애니메이션과 실행 걸려는 :

s.selectAll('.active').animate({ 
     transform: matrix 
    }, 
    300, 
    mina.linear, 
    function() { 
     //callback doesnt fire 
     alert('callback') 
    } 
) 

요소는 제대로 애니메이션되지만 콜백 밤은 실행.

내가 요소 그룹에 애니메이션을 적용 할 때, 콜백 해고된다

group.animate({ 
     transform: matrix 
    }, 
    300, 
    mina.linear, 
    function() { 
     alert('callback') 
    } 
) 

을 ... 그러나 나는이처럼 그룹 내 선택 요소를 넣어 싶지 않아 다른 장소에서 더 많은 합병증을 일으킬 수 있습니다.

콜백을 실행할 수있는 동안 .select() 또는 .selectAll()을 통해 얻은 요소 집합을 애니메이션화 할 수 있습니까?

미리 감사드립니다.

function hideToPoint(elements, x, y, callback) { 
    var finished = 0; 
    elements.forEach(function(e) { 

     e.animate({ 
       //do stuff 
      }, 
      300, 
      mina.linear, 
      function() { 
       finished++; 
       if (finished == elements.length) { 
        callback(); 
       } 
      } 
     ) 
    }) 
} 

Answer 1

나는 자상을거야을 몇 가지 문제에 대답에 :

편집 : 모든 요소가 애니메이션을 수행하는 경우 미래의 독자를 들어, 대해 forEach를 사용하여 계산하여 요소의 집합에 애니메이션을 적용 할 수 있습니다 , 비록 콜백과 관련이 있는지 잘 모르겠다. 그 jsfiddle 같은 적절한 테스트없이 단지 예제 코드인지 아닌지 알기가 어렵습니다.

그러나 위의 코드에는 적어도 2 가지 문제가 있습니다. 매트릭스를 생성

여기에 문제가 하나 개의 요소에 해당 애니메이션의 역할이다

또한

new Snap.Matrix(); // as opposed to Snap.matrix() 

elements.animate() 

함께 (편집 :이 세트 내의 요소에 작동하지만 수없는 것 같습니다 여기에 콜백, edit2 : 콜백이 지원 될 수 있습니다.), 여러 요소가 아닌 경우 (예 : 개별적으로 처리하는 집합에 일사를 적용 할 수 있지만, 알고있는 한 해당 사례가 아닙니다. 애니메이션으로).

그래서 당신이 중 하나는

elements.forEach(function(el) { el.animate({blah: value}, 2000, mina.linear.callback) 
}); 

또는 그 경우 SVG 그룹 (세트 반대), 원래의 코드가 작동 가능한 것 (하지만 대신 'MyGroup을'또는 뭔가를 호출 할 싶지 코드의 가독성을위한 '요소'와 그것을 포함 된 내용을 추측)의

fiddle (

스냅 애니메이션 문자열을 사용하여 다른 애니메이션)