OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <script src="../../polymer/polymer.js"></script> |
| 5 <link rel="import" href="polymer-animation-group.html"> |
| 6 </head> |
| 7 <body> |
| 8 <polymer-element name="transition-hslide-scale-out" extends="polymer-animation
-group" noscript> |
| 9 <template> |
| 10 <polymer-animation id="scale-out" duration="0.5"> |
| 11 <polymer-animation-keyframe> |
| 12 <polymer-animation-prop name="transform" value="scale(1)"></polymer-an
imation-prop> |
| 13 </polymer-animation-keyframe> |
| 14 <polymer-animation-keyframe> |
| 15 <polymer-animation-prop name="transform" value="scale(0.8)"></polymer-
animation-prop> |
| 16 </polymer-animation-keyframe> |
| 17 </polymer-animation> |
| 18 <polymer-animation id="hslide-in" duration="0.5"> |
| 19 <polymer-animation-keyframe> |
| 20 <polymer-animation-prop name="transform" value="translateX(100%)"></po
lymer-animation-prop> |
| 21 </polymer-animation-keyframe> |
| 22 <polymer-animation-keyframe> |
| 23 <polymer-animation-prop name="transform" value="translateX(0)"></polym
er-animation-prop> |
| 24 </polymer-animation-keyframe> |
| 25 </polymer-animation> |
| 26 </template> |
| 27 </polymer-element> |
| 28 |
| 29 <transition-hslide-scale-out></transition-hslide-scale-out> |
| 30 <div>Hi!</div> |
| 31 |
| 32 <script> |
| 33 document.addEventListener('polymer-ready', function() { |
| 34 var a = document.querySelector('transition-hslide-scale-out'); |
| 35 a.target = document.querySelector('div'); |
| 36 setTimeout(function() { |
| 37 a.play(); |
| 38 }, 50); |
| 39 }); |
| 40 </script> |
| 41 </body> |
| 42 </html> |
OLD | NEW |