Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(9)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/polymer/components/core-animation/demo.html

Issue 582873003: Polymer elements added to third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/polymer/components/core-animation/core-animation-group.html ('k') | third_party/polymer/components/core-animation/index.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/polymer/components/core-animation/demo.html
diff --git a/third_party/polymer/components/core-animation/demo.html b/third_party/polymer/components/core-animation/demo.html
new file mode 100644
index 0000000000000000000000000000000000000000..b9a10388d9c5816d7008a70d65103ccd1d56b9e8
--- /dev/null
+++ b/third_party/polymer/components/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>
« no previous file with comments | « third_party/polymer/components/core-animation/core-animation-group.html ('k') | third_party/polymer/components/core-animation/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698