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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/polymer/components-chromium/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 unified diff | Download patch
« no previous file with comments | « third_party/polymer/components-chromium/core-animation/core-animation-group-extracted.js ('k') | third_party/polymer/components-chromium/core-animation/index.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>core-animation</title>
5 <script src="../platform/platform.js"></script>
6 <link rel="import" href="core-animation.html">
7 <link rel="import" href="core-animation-group.html">
8
9 <!-- <link rel="import" href="polymer-blink.html">
10 <link rel="import" href="polymer-bounce.html">
11 <link rel="import" href="polymer-fadein.html">
12 <link rel="import" href="polymer-fadeout.html">
13 <link rel="import" href="polymer-flip.html">
14 <link rel="import" href="polymer-shake.html">
15 -->
16 <style>
17 body {
18 text-align: center;
19 font-family: Helvetica, sans-serif;
20 }
21 div#target {
22 display: inline-block;
23 background-color: dimgrey;
24 border-radius: 5px;
25 padding: 5px 10px;
26 margin: 50px;
27 font-size: 30px;
28 color: white;
29 }
30 div.animations > * {
31 display: inline-block;
32 background-color: darkgrey;
33 border-radius: 5px;
34 padding: 5px 10px;
35 margin: 5px;
36 color: white;
37 }
38 </style>
39 </head>
40 <body>
41
42 <div id="target">animated!</div>
43
44 <div class="animations">
45
46 <core-animation id="raw" duration="1000">
47 raw
48 <core-animation-keyframe>
49 <core-animation-prop name="opacity" value="1">
50 </core-animation-prop>
51 </core-animation-keyframe>
52 <core-animation-keyframe>
53 <core-animation-prop name="opacity" value="0.3">
54 </core-animation-prop>
55 </core-animation-keyframe>
56 <core-animation-keyframe>
57 <core-animation-prop name="opacity" value="1">
58 </core-animation-prop>
59 </core-animation-keyframe>
60 </core-animation>
61
62 <core-animation-group type="seq">
63 raw group
64 <core-animation duration="300">
65 <core-animation-keyframe>
66 <core-animation-prop name="opacity" value="1">
67 </core-animation-prop>
68 </core-animation-keyframe>
69 <core-animation-keyframe>
70 <core-animation-prop name="opacity" value="0.3">
71 </core-animation-prop>
72 </core-animation-keyframe>
73 <core-animation-keyframe>
74 <core-animation-prop name="opacity" value="1">
75 </core-animation-prop>
76 </core-animation-keyframe>
77 </core-animation>
78 <core-animation duration="300">
79 <core-animation-keyframe>
80 <core-animation-prop name="transform" value="scale(1)">
81 </core-animation-prop>
82 </core-animation-keyframe>
83 <core-animation-keyframe>
84 <core-animation-prop name="transform" value="scale(1.2)">
85 </core-animation-prop>
86 </core-animation-keyframe>
87 <core-animation-keyframe>
88 <core-animation-prop name="transform" value="scale(1)">
89 </core-animation-prop>
90 </core-animation-keyframe>
91 </core-animation>
92 </core-animation-group>
93
94 <core-animation id="custom-animation" duration="500">custom</core-animatio n>
95
96 <core-animation duration="1000" iterations="Infinity" direction="alternate ">
97 infinite
98 <core-animation-keyframe>
99 <core-animation-prop name="opacity" value="1">
100 </core-animation-prop>
101 </core-animation-keyframe>
102 <core-animation-keyframe>
103 <core-animation-prop name="opacity" value="0.3">
104 </core-animation-prop>
105 </core-animation-keyframe>
106 </core-animation>
107 <!-- <polymer-bounce duration="1000">bounce</polymer-bounce>
108 <polymer-shake>shake</polymer-shake>
109 <polymer-flip>flip X</polymer-flip>
110 <polymer-flip axis="y">flip Y</polymer-flip>
111 <polymer-blink>blink</polymer-blink>
112 <polymer-fadein>fade in</polymer-fadein>
113 --> </div>
114 <script>
115 var customAnimationFn = function(timeFraction, target) {
116 if (timeFraction < 1) {
117 target.textContent = timeFraction;
118 } else {
119 target.textContent = 'animated!';
120 }
121 };
122
123 document.addEventListener('polymer-ready', function() {
124 document.querySelector('.animations').addEventListener('click',
125 function(e) {
126 var animation = e.target;
127 if (animation.id === 'custom-animation') {
128 animation.customEffect = customAnimationFn;
129 }
130 animation.target = target;
131 animation.play();
132 });
133 document.getElementById('raw').addEventListener(
134 'core-animation-finish', function(e) {
135 console.log('finish!');
136 });
137 });
138 </script>
139 </body>
140 </html>
OLDNEW
« no previous file with comments | « third_party/polymer/components-chromium/core-animation/core-animation-group-extracted.js ('k') | third_party/polymer/components-chromium/core-animation/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698