polymer-ui-animated-pages: add polymer-pages-animation-end event

googlearchive · Oct 15, 2013 · a2263a9 · a2263a9
1 parent 760c71f
commit a2263a9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/polymer-ui-animated-pages/index.html b/polymer-ui-animated-pages/index.html
@@ -126,7 +126,7 @@
             <input value="{{duration}}" size="4">
           </label>
         </polymer-ui-toolbar>
-        <polymer-ui-animated-pages selected="{{page}}" directional?="{{directional}}" transition="{{transition}}">
+        <polymer-ui-animated-pages selected="{{page}}" directional?="{{directional}}" transition="{{transition}}" on-polymer-pages-animation-end="animationEndAction">
           <div class="grid" value="one">One</div>
           <div class="brick" value="two">Two</div>
           <div class="wave">Three</div>
@@ -230,6 +230,9 @@
             if (this.page > 4) {
               this.page = this.directional ? this.page - 1 : 0;
             }
+          },
+          animationEndAction: function() {
+            console.log('animationEnd');
           }
         });
       </script>

diff --git a/polymer-ui-animated-pages/polymer-ui-animated-pages.html b/polymer-ui-animated-pages/polymer-ui-animated-pages.html
@@ -16,6 +16,11 @@
  * @extends polymer-selector
  */
 -->
+<!--
+/**
+ * Fired when the transition animation ends
+ * @event polymer-pages-animation-end
+-->
 
 <link rel="import" href="../../polymer-elements/polymer-animation/web-animations.html">
 <link rel="import" href="../polymer-ui-pages/polymer-ui-pages.html">
@@ -112,6 +117,7 @@
           fill: 'none',
           direction: direction
         });
+        animation.onend = this.animationEndAction.bind(this);
         return animation;
       },
       selectedItemChanged: function(oldItem) {
@@ -120,6 +126,9 @@
         if (this.hasTransition()) {
           this.applyTransition();
         }
+      },
+      animationEndAction: function() {
+        this.fire('polymer-pages-animation-end');
       }
  		})
  	</script>