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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: pkg/polymer/lib/elements/polymer-animation/demo.html

Issue 175443005: [polymer] import all elements (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: updated from bower Created 6 years, 10 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 | « pkg/polymer/lib/elements/polymer-animation/bower.json ('k') | pkg/polymer/lib/elements/polymer-animation/docs.json » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: pkg/polymer/lib/elements/polymer-animation/demo.html
diff --git a/pkg/polymer/lib/elements/polymer-animation/demo.html b/pkg/polymer/lib/elements/polymer-animation/demo.html
new file mode 100644
index 0000000000000000000000000000000000000000..651461642f747456f4cb8810f4ec678b0829bf26
--- /dev/null
+++ b/pkg/polymer/lib/elements/polymer-animation/demo.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Polymer Animation Components</title>
+ <link rel="import" href="polymer-animation.html">
+ <link rel="import" href="polymer-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">
+ <script src="../platform/platform.js"></script>
+ <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">
+ <polymer-animation duration="1">
+ raw
+ <polymer-animation-keyframe>
+ <polymer-animation-prop name="opacity" value="1">
+ </polymer-animation-prop>
+ </polymer-animation-keyframe>
+ <polymer-animation-keyframe>
+ <polymer-animation-prop name="opacity" value="0.3">
+ </polymer-animation-prop>
+ </polymer-animation-keyframe>
+ <polymer-animation-keyframe>
+ <polymer-animation-prop name="opacity" value="1">
+ </polymer-animation-prop>
+ </polymer-animation-keyframe>
+ </polymer-animation>
+ <polymer-animation-group type="seq">
+ raw group
+ <polymer-animation duration="0.3">
+ <polymer-animation-keyframe>
+ <polymer-animation-prop name="opacity" value="1">
+ </polymer-animation-prop>
+ </polymer-animation-keyframe>
+ <polymer-animation-keyframe>
+ <polymer-animation-prop name="opacity" value="0.3">
+ </polymer-animation-prop>
+ </polymer-animation-keyframe>
+ <polymer-animation-keyframe>
+ <polymer-animation-prop name="opacity" value="1">
+ </polymer-animation-prop>
+ </polymer-animation-keyframe>
+ </polymer-animation>
+ <polymer-animation duration="0.3">
+ <polymer-animation-keyframe>
+ <polymer-animation-prop name="transform" value="scale(1)">
+ </polymer-animation-prop>
+ </polymer-animation-keyframe>
+ <polymer-animation-keyframe>
+ <polymer-animation-prop name="transform" value="scale(1.2)">
+ </polymer-animation-prop>
+ </polymer-animation-keyframe>
+ <polymer-animation-keyframe>
+ <polymer-animation-prop name="transform" value="scale(1)">
+ </polymer-animation-prop>
+ </polymer-animation-keyframe>
+ </polymer-animation>
+ </polymer-animation-group>
+ <polymer-animation id="sample-animation" duration="0.5">sample</polymer-animation>
+ <polymer-bounce duration="1">bounce</polymer-bounce>
+ <polymer-shake>shake</polymer-shake>
+ <!--<polymer-shake duration="Infinity">shake forever</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>
+ <polymer-fadeout>fade out (with event)</polymer-fadeout>
+ </div>
+ <script>
+ var sampleAnimationFn = function(timeFraction, currentIteration, animationTarget, underlyingValue) {
+ if (timeFraction < 1) {
+ animationTarget.textContent = timeFraction;
+ } else {
+ animationTarget.textContent = 'animated!';
+ }
+ };
+
+ document.addEventListener('polymer-ready', function() {
+ document.querySelector('.animations').addEventListener('click',
+ function(e) {
+ var animation = e.target;
+ if (animation.id === 'sample-animation') {
+ animation.sample = sampleAnimationFn;
+ }
+ animation.target = target;
+ animation.play();
+ });
+ document.querySelector('polymer-fadeout').addEventListener(
+ 'complete', function(e) {
+ alert('complete!');
+ });
+ });
+ </script>
+ </body>
+</html>
« no previous file with comments | « pkg/polymer/lib/elements/polymer-animation/bower.json ('k') | pkg/polymer/lib/elements/polymer-animation/docs.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698