スナップSVG：パスとアニメーションを交わす

Question

特定のパスにアニメーション化し、その後コールバック経由で元のパスに戻すと考えられるコードを少し書いた。それはパスにアニメートしますが、そこで停止します。何が間違っていますか？

例：jsfiddle

var speed = 250; 

[].slice.call(document.querySelectorAll('.arrow_button')).forEach(function(el) { 

    var s = Snap(el.querySelector('svg')), 
     path = s.select('path'), 
     route = el.getAttribute('data-path-route'), 
     callback = function() { 
      path.animate({ 'path' : path }, speed, mina.easeout); 
     }; 

    el.addEventListener('click', function() { 
     path.animate({ 'path' : route }, speed, mina.easein, callback()); 
    }); 

}); 

Answer 1

2個の主な問題があります。

最初に、コールバックの代わりにcallback（）を発行しています。 関数をすぐに実行したくない場合（関数を返さない限り）、後でコールバックが必要なときに実行したいので、大括弧を削除します。

2つ目は、origPathというアニメーションに戻すパスdプロパティを格納する必要があることです。

ので、コードは次のようになり

...

var s = Snap(el.querySelector('svg')), 
    path = s.select('path'), 
    origPath = path.attr('d'), 
    route = el.getAttribute('data-path-route'), 
    callback = function() { 
      path.animate({ 'path' : origPath }, speed, mina.easeout ); 
    }; 

    el.addEventListener('click', function() { 
     path.animate({ 'path' : route }, speed, mina.easein, callback); 
    }); 

jsfiddle