OLD | NEW |
(Empty) | |
| 1 <link rel="import" href="polymer-animation.html"> |
| 2 <polymer-element name="polymer-flip" extends="polymer-animation" attributes="axi
s"> |
| 3 <script> |
| 4 Polymer('polymer-flip', { |
| 5 axis: 'x', |
| 6 duration: 0.5, |
| 7 ready: function() { |
| 8 this.generate(); |
| 9 }, |
| 10 axisChanged: function() { |
| 11 this.generate(); |
| 12 }, |
| 13 generate: function() { |
| 14 var isY = this.axis === 'y' || this.axis === 'Y'; |
| 15 var rotate = isY ? 'rotateY' : 'rotateX'; |
| 16 var transZ = isY ? '150px' : '50px'; |
| 17 this.keyframes = [{ |
| 18 offset: 0, |
| 19 transform: 'perspective(400px) translateZ(0px) ' + rotate + '(0deg) sc
ale(1)' |
| 20 }, { |
| 21 offset: 0.4, |
| 22 transform: 'perspective(400px) translateZ(' + transZ + ') ' + rotate +
'(170deg) scale(1)' |
| 23 }, { |
| 24 offset: 0.5, |
| 25 transform: 'perspective(400px) translateZ(' + transZ + ') ' + rotate +
'(190deg) scale(1)' |
| 26 }, { |
| 27 offset: 0.8, |
| 28 transform: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg)
scale(.95)' |
| 29 }, { |
| 30 offset: 1, |
| 31 transform: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg)
scale(1)' |
| 32 }]; |
| 33 } |
| 34 }); |
| 35 </script> |
| 36 </polymer-element> |
OLD | NEW |