OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <html> | |
3 <head> | |
4 | |
5 <script src="../../platform/platform.js"></script> | |
6 <link href="../core-animated-pages.html" rel="import"> | |
7 <link href="../transitions/cross-fade.html" rel="import"> | |
8 <link href="../transitions/slide-from-right.html" rel="import"> | |
9 | |
10 <style> | |
11 body { | |
12 font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
13 margin: 0; | |
14 } | |
15 | |
16 core-animated-pages { | |
17 position: absolute; | |
18 top: 50px; | |
19 right: 0; | |
20 bottom: 0; | |
21 left: 0; | |
22 font-size: 72px; | |
23 overflow: hidden; | |
24 } | |
25 | |
26 section > div { | |
27 height: 100%; | |
28 color: white; | |
29 } | |
30 | |
31 </style> | |
32 | |
33 </head> | |
34 <body unresolved> | |
35 <select onchange="change();"> | |
36 <option value="cross-fade-all" selected>cross-fade-all</option> | |
37 <option value="slide-from-right">slide-from-right</option> | |
38 </select> | |
39 | |
40 <core-animated-pages onclick="stuff();" transitions="cross-fade-all"> | |
41 <section> | |
42 <div layout vertical center center-justified style="background:red;"> | |
43 <div>1</div> | |
44 </div> | |
45 </section> | |
46 <section> | |
47 <div layout vertical center center-justified style="background:blue;"> | |
48 <div>2</div> | |
49 </div> | |
50 </section> | |
51 <section> | |
52 <div layout vertical center center-justified style="background:purple;"> | |
53 <div>3</div> | |
54 </div> | |
55 </section> | |
56 <section> | |
57 <div layout vertical center center-justified style="background:orange;"> | |
58 <div>4</div> | |
59 </div> | |
60 </section> | |
61 <section> | |
62 <div layout vertical center center-justified style="background:green;"> | |
63 <div>5</div> | |
64 </div> | |
65 </section> | |
66 </core-animated-pages> | |
67 | |
68 <script> | |
69 function change() { | |
70 var s = document.querySelector('select'); | |
71 document.querySelector('core-animated-pages').transitions = document.query
Selector('select').options[s.selectedIndex].value; | |
72 } | |
73 | |
74 var up = true; | |
75 var max = 4; | |
76 function stuff() { | |
77 var p = document.querySelector('core-animated-pages'); | |
78 if (up && p.selected === max || !up && p.selected === 0) { | |
79 up = !up; | |
80 } | |
81 if (up) { | |
82 p.selected += 1; | |
83 } else { | |
84 p.selected -= 1; | |
85 } | |
86 } | |
87 </script> | |
88 </body> | |
89 </html> | |
OLD | NEW |