Chromium Code Reviews

Side by Side Diff: bower_components/core-animated-pages/transitions/cascade-transition.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.
Jump to:
View unified diff |
OLDNEW
(Empty)
1 <!--
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
8 -->
9
10 <link href="core-transition-pages.html" rel="import">
11
12 <core-style id="cascade-transition">
13 polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div'; }
14 :host(.cascade) ::content > * /deep/ [cascade] > div {
15 -webkit-transition: -webkit-transform {{g.transitions.cascadeDuration || g.t ransitions.duration}} cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.casc adeFadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
16 transition: transform {{g.transitions.cascadeDuration || g.transitions.durat ion}} cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.cascadeFadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
17 }
18
19 polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of- type(2)'; }
20 :host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(2) {
21 -webkit-transition-delay: 0.05s;
22 transition-delay: 0.05s;
23 }
24
25 polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of- type(3)'; }
26 :host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(3) {
27 -webkit-transition-delay: 0.1s;
28 transition-delay: 0.1s;
29 }
30
31 polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of- type(4)'; }
32 :host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(4) {
33 -webkit-transition-delay: 0.15s;
34 transition-delay: 0.15s;
35 }
36
37 polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of- type(5)'; }
38 :host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(5) {
39 -webkit-transition-delay: 0.2s;
40 transition-delay: 0.2s;
41 }
42
43 polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of- type(6)'; }
44 :host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(6) {
45 -webkit-transition-delay: 0.25s;
46 transition-delay: 0.25s;
47 }
48
49 polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of- type(7)'; }
50 :host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(7) {
51 -webkit-transition-delay: 0.3s;
52 transition-delay: 0.3s;
53 }
54
55 polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of- type(8)'; }
56 :host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(8) {
57 -webkit-transition-delay: 0.35s;
58 transition-delay: 0.35s;
59 }
60
61 polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of- type(9)'; }
62 :host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(9) {
63 -webkit-transition-delay: 0.4s;
64 transition-delay: 0.4s;
65 }
66
67 polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of- type(10)'; }
68 :host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(10) {
69 -webkit-transition-delay: 0.45s;
70 transition-delay: 0.45s;
71 }
72
73 polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of- type(11)'; }
74 :host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(11) {
75 -webkit-transition-delay: 0.5s;
76 transition-delay: 0.5s;
77 }
78
79 polyfill-next-selector { content: ':host(.cascade) > * [cascade] > div:nth-of- type(12)'; }
80 :host(.cascade) ::content > * /deep/ [cascade] > div:nth-of-type(12) {
81 -webkit-transition-delay: 0.55s;
82 transition-delay: 0.55s;
83 }
84
85 polyfill-next-selector { content: '.core-selected [cascade] > div'; }
86 ::content > .core-selected /deep/ [cascade] > div {
87 }
88
89 polyfill-next-selector { content: '[animate]:not(.core-selected) [cascade] > d iv'; }
90 ::content > [animate]:not(.core-selected) /deep/ [cascade] > div {
91 -webkit-transform: translateY(100%);
92 transform: translateY(100%);
93 }
94
95 polyfill-next-selector { content: '[animate]:not(.core-selected) [cascade][fad e] > div'; }
96 ::content > [animate]:not(.core-selected) /deep/ [cascade][fade] > div {
97 opacity: 0;
98 }
99 </core-style>
100
101 <!--
102
103 `cascade-transition` slides the children of a container up in sequence, creating a
104 reverse waterfall effect. It works well with both grids and lists. Configure the
105 duration of the transition with the global variable `CoreStyle.g.transitions.cas cadeDuration`.
106
107 Example:
108
109 <core-animated-pages transition="cascade-transition">
110 <section>
111 <div id="container" cascade>
112 <div>item 1</div>
113 <div>item 2</div>
114 <div>item 3</div>
115 <div>item 4</div>
116 <div>item 5</div>
117 <div>item 6</div>
118 <div>item 7</div>
119 </div>
120 </section>
121 <section></section>
122 </core-animated-pages>
123
124 In the above example, the immediate children of `#container` will slide up in
125 sequence when the page transitions from 0 to 1.
126
127 The items can optionally fade in as they slide. Add the `fade` attribute to
128 the container to do that and configure the duration of the opacity transition wi th
129 the global variable `CoreStyle.g.transitions.cascadeFadeDuration`.
130
131 @class cascade-transition
132 @extends core-transition-pages
133 @status beta
134 @homepage github.io
135
136 -->
137
138 <core-transition-pages id="cascade-transition" activeClass="cascade" transitionP roperty="transform"></core-transition-pages>
OLDNEW

Powered by Google App Engine