OLD | NEW |
(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="cross-fade"> |
| 13 polyfill-next-selector { content: ':host > * [cross-fade]'; } |
| 14 ::content > * /deep/ [cross-fade] { |
| 15 -webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.d
uration}} cubic-bezier(0.4, 0, 0.2, 1); |
| 16 transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}
} cubic-bezier(0.4, 0, 0.2, 1); |
| 17 } |
| 18 |
| 19 polyfill-next-selector { content: ':host > * [cross-fade][bg]'; } |
| 20 ::content > * /deep/ [cross-fade][bg] { |
| 21 -webkit-transition: background-color {{g.transitions.xfadeDuration || g.tran
sitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); |
| 22 transition: background-color {{g.transitions.xfadeDuration || g.transitions.
duration}} cubic-bezier(0.4, 0, 0.2, 1); |
| 23 } |
| 24 |
| 25 polyfill-next-selector { content: ':host > * [cross-fade][hero-p]'; } |
| 26 ::content > * /deep/ [cross-fade][hero-p] { |
| 27 -webkit-transition: background-color {{g.transitions.xfadeDuration || g.tran
sitions.duration}} cubic-bezier(0.4, 0, 0.2, 1); |
| 28 transition: background-color {{g.transitions.xfadeDuration || g.transitions.
duration}} cubic-bezier(0.4, 0, 0.2, 1); |
| 29 } |
| 30 |
| 31 polyfill-next-selector { content: ':host > .core-selected [cross-fade]'; } |
| 32 ::content > .core-selected /deep/ [cross-fade] { |
| 33 opacity: 1; |
| 34 } |
| 35 |
| 36 polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cros
s-fade]:not([hero-p]):not([bg])'; } |
| 37 ::content > [animate]:not(.core-selected) /deep/ [cross-fade]:not([hero-p]):no
t([bg]) { |
| 38 opacity: 0; |
| 39 } |
| 40 |
| 41 polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cros
s-fade][bg]'; } |
| 42 ::content > [animate]:not(.core-selected) /deep/ [cross-fade][bg] { |
| 43 background-color: rgba(0, 0, 0, 0); |
| 44 } |
| 45 |
| 46 polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cros
s-fade][hero-p]'; } |
| 47 ::content > [animate]:not(.core-selected) /deep/ [cross-fade][hero-p] { |
| 48 background-color: rgba(0, 0, 0, 0); |
| 49 } |
| 50 </core-style> |
| 51 |
| 52 <core-style id="cross-fade-delayed"> |
| 53 polyfill-next-selector { content: ':host > * [cross-fade-delayed]'; } |
| 54 ::content > * /deep/ [cross-fade-delayed] { |
| 55 -webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.d
uration}} ease-out; |
| 56 transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}
} ease-out; |
| 57 } |
| 58 |
| 59 polyfill-next-selector { content: ':host > .core-selected [cross-fade-delayed]
'; } |
| 60 ::content > .core-selected /deep/ [cross-fade-delayed] { |
| 61 -webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.d
uration}} ease-out {{g.transitions.xfadeDelay || g.transitions.xfadeDuration ||
g.transitions.duration}}; |
| 62 transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}
} ease-out {{g.transitions.xfadeDelay || g.transitions.xfadeDuration || g.transi
tions.duration}}; |
| 63 } |
| 64 |
| 65 polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cros
s-fade-delayed]'; } |
| 66 ::content > [animate]:not(.core-selected) /deep/ [cross-fade-delayed] { |
| 67 opacity: 0; |
| 68 } |
| 69 |
| 70 polyfill-next-selector { content: ':host > .core-selected [cross-fade-delayed]
'; } |
| 71 ::content > .core-selected /deep/ [cross-fade-delayed] { |
| 72 opacity: 1; |
| 73 } |
| 74 |
| 75 </core-style> |
| 76 |
| 77 <core-style id="cross-fade-all"> |
| 78 /* cross-fade-all: cross fade everything except for heroes and their parents *
/ |
| 79 polyfill-next-selector { content: ':host(.cross-fade-all) > * *:not([hero]):no
t([hero-p]):not([cross-fade])'; } |
| 80 :host(.cross-fade-all) ::content > * /deep/ *:not([hero]):not([hero-p]):not([c
ross-fade]) { |
| 81 -webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.d
uration}} ease-out; |
| 82 transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}
} ease-out; |
| 83 } |
| 84 |
| 85 polyfill-next-selector { content: ':host(.cross-fade-all) > [animate]:not(.cor
e-selected) *:not([hero]):not([hero-p]):not([cross-fade])'; } |
| 86 :host(.cross-fade-all) ::content > [animate]:not(.core-selected) /deep/ *:not(
[hero]):not([hero-p]):not([cross-fade]) { |
| 87 opacity: 0; |
| 88 } |
| 89 |
| 90 polyfill-next-selector { content: ':host(.cross-fade-all) > .core-selected *:n
ot([hero])'; } |
| 91 .host(.cross-fade-all) ::content > .core-selected /deep/ * { |
| 92 opacity: 1; |
| 93 } |
| 94 |
| 95 /* Only background-color is allowed for the hero's parents, no opacity transit
ions */ |
| 96 polyfill-next-selector { content: ':host(.cross-fade-all) > * [hero-p]'; } |
| 97 :host(.cross-fade-all) ::content > * /deep/ [hero-p] { |
| 98 -webkit-transition: background-color {{g.transitions.xfadeDuration || g.tran
sitions.duration}} ease-out; |
| 99 transition: background-color {{g.transitions.xfadeDuration || g.transitions.
duration}} ease-out; |
| 100 opacity: 1; |
| 101 } |
| 102 |
| 103 polyfill-next-selector { content: ':host(.cross-fade-all) > [animate]:not(.cor
e-selected) [hero-p]'; } |
| 104 :host(.cross-fade-all) ::content > [animate]:not(.core-selected) /deep/ [hero-
p] { |
| 105 background-color: rgba(0, 0, 0, 0); |
| 106 } |
| 107 </core-style> |
| 108 |
| 109 <!-- |
| 110 |
| 111 `cross-fade` fades out elements in the outgoing page and fades in elements in th
e |
| 112 incoming page during a page transition. You can configure the duration of the |
| 113 transition with the global variable `CoreStyle.g.transitions.xfadeDuration`. |
| 114 |
| 115 Example: |
| 116 |
| 117 <core-animated-pages transition="cross-fade"> |
| 118 <section> |
| 119 <div id="div1" cross-fade></div> |
| 120 </section> |
| 121 <section> |
| 122 <div id="div2" cross-fade bg> |
| 123 <div id="div3" cross-fade></div> |
| 124 <div id="div4"></div> |
| 125 </div> |
| 126 </section> |
| 127 </core-animated-pages> |
| 128 |
| 129 In the above example, `#div1` and `#div3` has the `cross-fade` attribute. `#div1
` |
| 130 will fade out and `#div3` will fade in with opacity transitions when the page sw
itches |
| 131 from 0 to 1. Sometimes, you may want to only fade the background color of an ele
ment |
| 132 but not its children, and you can use the `bg` attribute along with the `#div1` |
| 133 attribute as in `#div2`. |
| 134 |
| 135 @class cross-fade |
| 136 @extends core-transition-pages |
| 137 @status beta |
| 138 @homepage github.io |
| 139 |
| 140 --> |
| 141 |
| 142 <!-- |
| 143 |
| 144 `cross-fade-delayed` performs a cross-fade after some delay, either specified in |
| 145 the global variable `CoreStyle.g.transitions.xfadeDelay` or the duration of the |
| 146 transition. |
| 147 |
| 148 Example: |
| 149 |
| 150 <core-animated-pages transition="hero-transition cross-fade-delayed"> |
| 151 <section> |
| 152 <div id="div1" hero-id hero></div> |
| 153 </section> |
| 154 <section> |
| 155 <div id="div2" hero-id hero> |
| 156 <div id="div3" cross-fade-delayed></div> |
| 157 </div> |
| 158 </section> |
| 159 </core-animated-pages> |
| 160 |
| 161 In the above example, `#div3` fades in after the hero transition from `#div1` to |
| 162 `#div2` completes. |
| 163 |
| 164 @class cross-fade-delayed |
| 165 @extends core-transition-pages |
| 166 @status beta |
| 167 @homepage github.io |
| 168 |
| 169 --> |
| 170 |
| 171 <core-transition-pages id="cross-fade"></core-transition-pages> |
| 172 <core-transition-pages id="cross-fade-delayed"></core-transition-pages> |
| 173 <core-transition-pages id="cross-fade-all" scopeClass="cross-fade-all"></core-tr
ansition-pages> |
OLD | NEW |