Index: pkg/polymer/lib/elements/polymer-animation/polymer-bounce.html |
diff --git a/pkg/polymer/lib/elements/polymer-animation/polymer-bounce.html b/pkg/polymer/lib/elements/polymer-animation/polymer-bounce.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..9a24ad7a9aa0bb4196a4309dea1e58613e3b5ea8 |
--- /dev/null |
+++ b/pkg/polymer/lib/elements/polymer-animation/polymer-bounce.html |
@@ -0,0 +1,29 @@ |
+<link rel="import" href="polymer-animation.html"> |
+<polymer-element name="polymer-bounce" extends="polymer-animation"> |
+ <script> |
+ Polymer('polymer-bounce', { |
+ targetSelector: '', |
+ duration: 1, |
+ magnitude: '-30px', |
+ ready: function() { |
+ this.super(); |
+ this.magnitudeChanged(); |
+ }, |
+ magnitudeChanged: function() { |
+ this.generate(); |
+ }, |
+ generate: function() { |
+ var parsed = this.magnitude.match(/([\-0-9]+)(.*)/); |
+ this.keyframes = [ |
+ {offset: 0, transform: 'translateY(0)'}, |
+ {offset: 0.2, transform: 'translateY(0)'}, |
+ {offset: 0.4, transform: 'translateY(' + this.magnitude + ')'}, |
+ {offset: 0.5, transform: 'translateY(0)'}, |
+ {offset: 0.6, transform:'translateY(' + Number(parsed[1]) / 2 + parsed[2] + ')'}, |
+ {offset: 0.8, transform: 'translateY(0)'}, |
+ {offset: 1, transform: 'translateY(0)'} |
+ ]; |
+ } |
+ }); |
+ </script> |
+</polymer-element> |