Merge branch 'master' of github.com:Polymer/polymer-elements

Author: frankiefu

polymer-animation/polymer-animation-prop.html

@@ -1,5 +1,4 @@
-<link rel="import" href="polymer-animation-keyframe.html">
-<polymer-element name="polymer-animation-prop" attributes="name value">
+<polymer-element name="polymer-animation-prop" attributes="name value" noscript>
   <script>
     /**
      * A CSS property and value to use in a `<polymer-animation-keyframe>`.
@@ -17,6 +16,5 @@
       * @property value
       * @required
       */
-    Polymer('polymer-animation-prop');
   </script>
 </polymer-element>

polymer-animation/polymer-animation.html

@@ -46,8 +46,12 @@
        * @class polymer-animation
        */
        /**
-        * Fired when an animation completes
-        * @event complete
+			  * Fired when the animation starts
+			  * @event animation-start
+				*
+        * Fired when the animation completes
+        * @event animation-end
+				* 
         */
       Polymer('polymer-animation', {
         publish: {
@@ -145,12 +149,8 @@
             //this.animation && console.log('play', this.animation);
             if (this.animation) {
               this.cancel();
-							if (!this.animation.onend) {
-								this.animation.onend = this.complete.bind(this);
-							}
+							this.bindAnimationEvents();
               this.player = document.timeline.play(this.animation);
-              this.player.paused = false;
-              this.player.currentTime = 0;
             }
           });
         },
@@ -262,9 +262,19 @@
           }
           return new KeyframeAnimationEffect(frames, this.composite);
         },
-        // intended for user implementation
-        complete: function() {
-          this.fire('complete');
+				bindAnimationEvents: function() {
+					if (!this.animation.onstart) {
+						this.animation.onstart = this.animationStartHandler.bind(this);
+					}
+					if (!this.animation.onend) {
+						this.animation.onend = this.animationEndHandler.bind(this);
+					}
+				},
+				animationStartHandler: function() {
+					this.fire('animation-start');
+				},
+        animationEndHandler: function() {
+          this.fire('animation-end');
         }
       });
     })();

polymer-overlay/polymer-overlay-scale.html

@@ -0,0 +1,18 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<link rel="import" href="../polymer-animation/polymer-animation.html">
+
+<polymer-element name="polymer-overlay-scale" extends="polymer-animation">
+	<script>
+		Polymer('polymer-overlay-scale', {
+			duration: 0.218,
+			properties: {
+				opacity: ['0', '1'],
+				transform: ['scale(1.05)', 'scale(1)']
+			}
+		};
+	</script>
+</polymer-element>

polymer-overlay/polymer-overlay-slideup.html

@@ -0,0 +1,18 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<link rel="import" href="../polymer-animation/polymer-animation.html">
+
+<polymer-element name="polymer-overlay-slideup" extends="polymer-animation">
+	<script>
+		Polymer('polymer-overlay-slideup', {
+			duration: 0.4,
+			properties: {
+				opacity: ['1', '0'],
+				transform: ['translateY(0)', 'translateY(-100%)']
+			}
+		};
+	</script>
+</polymer-element>