我写了一些代码,我认为它会动画到某个路径然后通过回调恢复到原始路径。它动摇了路径但停在那里,我做错了什么?
示例: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() );
} );
} );
答案 0 :(得分:1)
有两个主要问题。
首先是你发出callback()而不是回调。 你不想立即运行该函数(除非它返回一个函数),你想在以后需要回调时运行它,所以删除括号。
第二个是你需要将路径d属性存储回动画,这里称为origPath。
所以代码看起来像......
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 );
} );