start the animation when after(All)/during(All) is called (#583)

1 files changed, 16 insertions, 6 deletions

diff --git a/src/fx.js b/src/fx.js
index 157c4f9..98ded65 100644
--- a/src/fx.js
+++ b/src/fx.js
@@ -422,7 +422,8 @@ SVG.FX = SVG.invent({
           }
 
       this.target().on('finished.fx', wrapper)
-      return this
+
+      return this._callStart()
     }
 
     // adds a callback which is called whenever one animation step is performed
@@ -437,9 +438,11 @@ SVG.FX = SVG.invent({
       // see above
       this.target().off('during.fx', wrapper).on('during.fx', wrapper)
 
-      return this.after(function(){
+      this.after(function(){
         this.off('during.fx', wrapper)
       })
+
+      return this._callStart()
     }
 
     // calls after ALL animations in the queue are finished
@@ -451,7 +454,8 @@ SVG.FX = SVG.invent({
 
       // see above
       this.target().off('allfinished.fx', wrapper).on('allfinished.fx', wrapper)
-      return this
+
+      return this._callStart()
     }
 
     // calls on every animation step for all animations
@@ -462,9 +466,11 @@ SVG.FX = SVG.invent({
 
       this.target().off('during.fx', wrapper).on('during.fx', wrapper)
 
-      return this.afterAll(function(){
+      this.afterAll(function(){
         this.off('during.fx', wrapper)
       })
+
+      return this._callStart()
     }
 
   , last: function(){
@@ -474,8 +480,7 @@ SVG.FX = SVG.invent({
     // adds one property to the animations
   , add: function(method, args, type){
       this.last()[type || 'animations'][method] = args
-      setTimeout(function(){this.start()}.bind(this), 0)
-      return this
+      return this._callStart()
     }
 
     /** perform one step of the animation
@@ -663,6 +668,11 @@ SVG.FX = SVG.invent({
       return this
     }
 
+  , _callStart: function() {
+      setTimeout(function(){this.start()}.bind(this), 0)
+      return this
+    }
+
   }
 
 , parent: SVG.Element