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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 666453002: Removed Polymer elements depending on web-animations-js. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 2 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
deleted file mode 100644
index b9a10388d9c5816d7008a70d65103ccd1d56b9e8..0000000000000000000000000000000000000000
--- a/third_party/polymer/components/core-animation/demo.html
+++ /dev/null
@@ -1,140 +0,0 @@
-<!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