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

Side by Side 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, 9 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 unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Polymer Animation Components</title>
5 <link rel="import" href="polymer-animation.html">
6 <link rel="import" href="polymer-animation-group.html">
7 <link rel="import" href="polymer-blink.html">
8 <link rel="import" href="polymer-bounce.html">
9 <link rel="import" href="polymer-fadein.html">
10 <link rel="import" href="polymer-fadeout.html">
11 <link rel="import" href="polymer-flip.html">
12 <link rel="import" href="polymer-shake.html">
13 <script src="../platform/platform.js"></script>
14 <style>
15 body {
16 text-align: center;
17 font-family: Helvetica, sans-serif;
18 }
19 div#target {
20 display: inline-block;
21 background-color: dimgrey;
22 border-radius: 5px;
23 padding: 5px 10px;
24 margin: 50px;
25 font-size: 30px;
26 color: white;
27 }
28 div.animations > * {
29 display: inline-block;
30 background-color: darkgrey;
31 border-radius: 5px;
32 padding: 5px 10px;
33 margin: 5px;
34 color: white;
35 }
36 </style>
37 </head>
38 <body>
39 <div id="target">animated!</div>
40 <div class="animations">
41 <polymer-animation duration="1">
42 raw
43 <polymer-animation-keyframe>
44 <polymer-animation-prop name="opacity" value="1">
45 </polymer-animation-prop>
46 </polymer-animation-keyframe>
47 <polymer-animation-keyframe>
48 <polymer-animation-prop name="opacity" value="0.3">
49 </polymer-animation-prop>
50 </polymer-animation-keyframe>
51 <polymer-animation-keyframe>
52 <polymer-animation-prop name="opacity" value="1">
53 </polymer-animation-prop>
54 </polymer-animation-keyframe>
55 </polymer-animation>
56 <polymer-animation-group type="seq">
57 raw group
58 <polymer-animation duration="0.3">
59 <polymer-animation-keyframe>
60 <polymer-animation-prop name="opacity" value="1">
61 </polymer-animation-prop>
62 </polymer-animation-keyframe>
63 <polymer-animation-keyframe>
64 <polymer-animation-prop name="opacity" value="0.3">
65 </polymer-animation-prop>
66 </polymer-animation-keyframe>
67 <polymer-animation-keyframe>
68 <polymer-animation-prop name="opacity" value="1">
69 </polymer-animation-prop>
70 </polymer-animation-keyframe>
71 </polymer-animation>
72 <polymer-animation duration="0.3">
73 <polymer-animation-keyframe>
74 <polymer-animation-prop name="transform" value="scale(1)">
75 </polymer-animation-prop>
76 </polymer-animation-keyframe>
77 <polymer-animation-keyframe>
78 <polymer-animation-prop name="transform" value="scale(1.2)">
79 </polymer-animation-prop>
80 </polymer-animation-keyframe>
81 <polymer-animation-keyframe>
82 <polymer-animation-prop name="transform" value="scale(1)">
83 </polymer-animation-prop>
84 </polymer-animation-keyframe>
85 </polymer-animation>
86 </polymer-animation-group>
87 <polymer-animation id="sample-animation" duration="0.5">sample</polymer-an imation>
88 <polymer-bounce duration="1">bounce</polymer-bounce>
89 <polymer-shake>shake</polymer-shake>
90 <!--<polymer-shake duration="Infinity">shake forever</polymer-shake>//-->
91 <polymer-flip>flip X</polymer-flip>
92 <polymer-flip axis="y">flip Y</polymer-flip>
93 <polymer-blink>blink</polymer-blink>
94 <polymer-fadein>fade in</polymer-fadein>
95 <polymer-fadeout>fade out (with event)</polymer-fadeout>
96 </div>
97 <script>
98 var sampleAnimationFn = function(timeFraction, currentIteration, animation Target, underlyingValue) {
99 if (timeFraction < 1) {
100 animationTarget.textContent = timeFraction;
101 } else {
102 animationTarget.textContent = 'animated!';
103 }
104 };
105
106 document.addEventListener('polymer-ready', function() {
107 document.querySelector('.animations').addEventListener('click',
108 function(e) {
109 var animation = e.target;
110 if (animation.id === 'sample-animation') {
111 animation.sample = sampleAnimationFn;
112 }
113 animation.target = target;
114 animation.play();
115 });
116 document.querySelector('polymer-fadeout' ).addEventListener(
117 'complete', function(e) {
118 alert('complete!');
119 });
120 });
121 </script>
122 </body>
123 </html>
OLDNEW
« 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