Index: third_party/polymer/components-chromium/core-animation/demo.html |
diff --git a/third_party/polymer/components-chromium/core-animation/demo.html b/third_party/polymer/components-chromium/core-animation/demo.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..b9a10388d9c5816d7008a70d65103ccd1d56b9e8 |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/core-animation/demo.html |
@@ -0,0 +1,140 @@ |
+<!DOCTYPE html> |
+<html> |
+ <head> |
+ <title>core-animation</title> |
+ <script src="../platform/platform.js"></script> |
+ <link rel="import" href="core-animation.html"> |
+ <link rel="import" href="core-animation-group.html"> |
+ |
+<!-- <link rel="import" href="polymer-blink.html"> |
+ <link rel="import" href="polymer-bounce.html"> |
+ <link rel="import" href="polymer-fadein.html"> |
+ <link rel="import" href="polymer-fadeout.html"> |
+ <link rel="import" href="polymer-flip.html"> |
+ <link rel="import" href="polymer-shake.html"> |
+ --> |
+ <style> |
+ body { |
+ text-align: center; |
+ font-family: Helvetica, sans-serif; |
+ } |
+ div#target { |
+ display: inline-block; |
+ background-color: dimgrey; |
+ border-radius: 5px; |
+ padding: 5px 10px; |
+ margin: 50px; |
+ font-size: 30px; |
+ color: white; |
+ } |
+ div.animations > * { |
+ display: inline-block; |
+ background-color: darkgrey; |
+ border-radius: 5px; |
+ padding: 5px 10px; |
+ margin: 5px; |
+ color: white; |
+ } |
+ </style> |
+ </head> |
+ <body> |
+ |
+ <div id="target">animated!</div> |
+ |
+ <div class="animations"> |
+ |
+ <core-animation id="raw" duration="1000"> |
+ raw |
+ <core-animation-keyframe> |
+ <core-animation-prop name="opacity" value="1"> |
+ </core-animation-prop> |
+ </core-animation-keyframe> |
+ <core-animation-keyframe> |
+ <core-animation-prop name="opacity" value="0.3"> |
+ </core-animation-prop> |
+ </core-animation-keyframe> |
+ <core-animation-keyframe> |
+ <core-animation-prop name="opacity" value="1"> |
+ </core-animation-prop> |
+ </core-animation-keyframe> |
+ </core-animation> |
+ |
+ <core-animation-group type="seq"> |
+ raw group |
+ <core-animation duration="300"> |
+ <core-animation-keyframe> |
+ <core-animation-prop name="opacity" value="1"> |
+ </core-animation-prop> |
+ </core-animation-keyframe> |
+ <core-animation-keyframe> |
+ <core-animation-prop name="opacity" value="0.3"> |
+ </core-animation-prop> |
+ </core-animation-keyframe> |
+ <core-animation-keyframe> |
+ <core-animation-prop name="opacity" value="1"> |
+ </core-animation-prop> |
+ </core-animation-keyframe> |
+ </core-animation> |
+ <core-animation duration="300"> |
+ <core-animation-keyframe> |
+ <core-animation-prop name="transform" value="scale(1)"> |
+ </core-animation-prop> |
+ </core-animation-keyframe> |
+ <core-animation-keyframe> |
+ <core-animation-prop name="transform" value="scale(1.2)"> |
+ </core-animation-prop> |
+ </core-animation-keyframe> |
+ <core-animation-keyframe> |
+ <core-animation-prop name="transform" value="scale(1)"> |
+ </core-animation-prop> |
+ </core-animation-keyframe> |
+ </core-animation> |
+ </core-animation-group> |
+ |
+ <core-animation id="custom-animation" duration="500">custom</core-animation> |
+ |
+ <core-animation duration="1000" iterations="Infinity" direction="alternate"> |
+ infinite |
+ <core-animation-keyframe> |
+ <core-animation-prop name="opacity" value="1"> |
+ </core-animation-prop> |
+ </core-animation-keyframe> |
+ <core-animation-keyframe> |
+ <core-animation-prop name="opacity" value="0.3"> |
+ </core-animation-prop> |
+ </core-animation-keyframe> |
+ </core-animation> |
+<!-- <polymer-bounce duration="1000">bounce</polymer-bounce> |
+ <polymer-shake>shake</polymer-shake> |
+ <polymer-flip>flip X</polymer-flip> |
+ <polymer-flip axis="y">flip Y</polymer-flip> |
+ <polymer-blink>blink</polymer-blink> |
+ <polymer-fadein>fade in</polymer-fadein> |
+ --> </div> |
+ <script> |
+ var customAnimationFn = function(timeFraction, target) { |
+ if (timeFraction < 1) { |
+ target.textContent = timeFraction; |
+ } else { |
+ target.textContent = 'animated!'; |
+ } |
+ }; |
+ |
+ document.addEventListener('polymer-ready', function() { |
+ document.querySelector('.animations').addEventListener('click', |
+ function(e) { |
+ var animation = e.target; |
+ if (animation.id === 'custom-animation') { |
+ animation.customEffect = customAnimationFn; |
+ } |
+ animation.target = target; |
+ animation.play(); |
+ }); |
+ document.getElementById('raw').addEventListener( |
+ 'core-animation-finish', function(e) { |
+ console.log('finish!'); |
+ }); |
+ }); |
+ </script> |
+ </body> |
+</html> |