OLD | NEW |
(Empty) | |
| 1 <link rel="import" href="polymer-animation.html"> |
| 2 <polymer-element name="polymer-bounce" extends="polymer-animation"> |
| 3 <script> |
| 4 Polymer('polymer-bounce', { |
| 5 targetSelector: '', |
| 6 duration: 1, |
| 7 magnitude: '-30px', |
| 8 ready: function() { |
| 9 this.super(); |
| 10 this.magnitudeChanged(); |
| 11 }, |
| 12 magnitudeChanged: function() { |
| 13 this.generate(); |
| 14 }, |
| 15 generate: function() { |
| 16 var parsed = this.magnitude.match(/([\-0-9]+)(.*)/); |
| 17 this.keyframes = [ |
| 18 {offset: 0, transform: 'translateY(0)'}, |
| 19 {offset: 0.2, transform: 'translateY(0)'}, |
| 20 {offset: 0.4, transform: 'translateY(' + this.magnitude + ')'}, |
| 21 {offset: 0.5, transform: 'translateY(0)'}, |
| 22 {offset: 0.6, transform:'translateY(' + Number(parsed[1]) / 2 + parsed
[2] + ')'}, |
| 23 {offset: 0.8, transform: 'translateY(0)'}, |
| 24 {offset: 1, transform: 'translateY(0)'} |
| 25 ]; |
| 26 } |
| 27 }); |
| 28 </script> |
| 29 </polymer-element> |
OLD | NEW |