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

Side by Side Diff: bower_components/core-transition/demo.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 11 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
OLDNEW
(Empty)
1 <!doctype html>
2 <!--
3 Copyright 2013 The Polymer Authors. All rights reserved.
4 Use of this source code is governed by a BSD-style
5 license that can be found in the LICENSE file.
6 -->
7 <html>
8 <head>
9
10 <meta charset="utf-8">
11 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
12 <meta name="viewport" content="width=device-width, initial-scale=1, user-scala ble=no">
13
14 <title>core-transition</title>
15
16 <script src="../platform/platform.js"></script>
17
18 <link href="core-transition-css.html" rel="import">
19
20 <style>
21 #animate-me {
22 background-color: lime;
23 position: fixed;
24 top: 100px;
25 width: 100%;
26 height: 100%;
27 }
28 </style>
29
30 </head>
31 <body unresolved>
32
33 <div id="animate-me" hidden></div>
34
35 <select id="sel" onchange="setup();">
36 <option value="core-transition-fade" selected>core-transition-fade</option>
37 <option value="core-transition-center">core-transition-center</option>
38 <option value="core-transition-top">core-transition-top</option>
39 <option value="core-transition-bottom">core-transition-bottom</option>
40 <option value="core-transition-left">core-transition-left</option>
41 <option value="core-transition-right">core-transition-right</option>
42 </select>
43
44 <button onclick="stuff();">toggle</button>
45
46 <script>
47
48 document.addEventListener('polymer-ready', function() {
49 // initial setup
50 setup();
51 document.getElementById('animate-me').removeAttribute('hidden');
52 });
53
54 var meta;
55 var transition;
56 var state = {
57 opened: false
58 }
59
60 function getMeta() {
61 if (!meta) {
62 meta = document.createElement('core-meta');
63 meta.type = 'transition';
64 }
65 return meta;
66 }
67
68 function setup() {
69 var target = document.getElementById('animate-me');
70
71 if (transition) {
72 transition.teardown(target);
73 }
74
75 var value = document.getElementById('sel').selectedOptions[0].value;
76 transition = getMeta().byId(value);
77 transition.setup(target);
78 }
79
80 function stuff() {
81 var target = document.getElementById('animate-me');
82 state.opened = !state.opened;
83 transition.go(target, state);
84 }
85 </script>
86 </body>
87 </html>
OLDNEW
« no previous file with comments | « bower_components/core-transition/core-transition-overlay.css ('k') | bower_components/core-transition/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698