Merge pull request #242 from PolymerElements/fix-concurrent-animations

Fix concurrent animations

neon-animation-runner-behavior.html

@@ -21,35 +21,57 @@
 
     _configureAnimations: function(configs) {
       var results = [];
+      var resultsToPlay = [];
+
       if (configs.length > 0) {
         for (var config, index = 0; config = configs[index]; index++) {
           var neonAnimation = document.createElement(config.name);
           // is this element actually a neon animation?
           if (neonAnimation.isNeonAnimation) {
             var result = null;
-            // configuration or play could fail if polyfills aren't loaded
-            try {
-              result = neonAnimation.configure(config);
-              // Check if we have an Effect rather than an Animation
-              if (typeof result.cancel != 'function') {
-                result = document.timeline.play(result);
+            // Closure compiler does not work well with a try / catch here. .configure needs to be
+            // explicitly defined
+            if (!neonAnimation.configure) {
+              /**
+               * @param {Object} config
+               * @return {AnimationEffectReadOnly}
+               */
+              neonAnimation.configure = function(config) {
+                return null;
               }
-            } catch (e) {
-              result = null;
-              console.warn('Couldnt play', '(', config.name, ').', e);
-            }
-            if (result) {
-              results.push({
-                neonAnimation: neonAnimation,
-                config: config,
-                animation: result,
-              });
             }
+
+            result = neonAnimation.configure(config);
+            resultsToPlay.push({ result: result, config: config });
           } else {
             console.warn(this.is + ':', config.name, 'not found!');
           }
         }
       }
+
+      for (var i = 0; i < resultsToPlay.length; i++) {
+        var result = resultsToPlay[i].result;
+        var config = resultsToPlay[i].config;
+        // configuration or play could fail if polyfills aren't loaded
+        try {
+          // Check if we have an Effect rather than an Animation
+          if (typeof result.cancel != 'function') {
+            result = document.timeline.play(result);
+          }
+        } catch (e) {
+          result = null;
+          console.warn('Couldnt play', '(', config.name, ').', e);
+        }
+
+        if (result) {
+          results.push({
+            neonAnimation: neonAnimation,
+            config: config,
+            animation: result,
+          });
+        }
+      }
+
       return results;
     },
 
@@ -113,10 +135,15 @@
      * Cancels the currently running animations.
      */
     cancelAnimation: function() {
-      for (var k in this._animations) {
-        this._animations[k].cancel();
+      for (var k in this._active) {
+        var entries = this._active[k]
+
+        for (var j in entries) {
+          entries[j].animation.cancel();
+        }
       }
-      this._animations = {};
+
+      this._active = {};
     }
   };