1<!-- 2Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 6Code distributed by Google as part of the polymer project is also 7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.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.duration}} 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.transitions.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.transitions.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) [cross-fade]:not([hero-p]):not([bg])'; } 37 ::content > [animate]:not(.core-selected) /deep/ [cross-fade]:not([hero-p]):not([bg]) { 38 opacity: 0; 39 } 40 41 polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-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) [cross-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.duration}} 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.duration}} 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.transitions.duration}}; 63 } 64 65 polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-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]):not([hero-p]):not([cross-fade])'; } 80 :host(.cross-fade-all) ::content > * /deep/ *:not([hero]):not([hero-p]):not([cross-fade]) { 81 -webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} 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(.core-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 *:not([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 transitions */ 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.transitions.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(.core-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 the 112incoming page during a page transition. You can configure the duration of the 113transition with the global variable `CoreStyle.g.transitions.xfadeDuration`. 114 115Example: 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 129In the above example, `#div1` and `#div3` has the `cross-fade` attribute. `#div1` 130will fade out and `#div3` will fade in with opacity transitions when the page switches 131from 0 to 1. Sometimes, you may want to only fade the background color of an element 132but not its children, and you can use the `bg` attribute along with the `#div1` 133attribute 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 145the global variable `CoreStyle.g.transitions.xfadeDelay` or the duration of the 146transition. 147 148Example: 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 161In 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-transition-pages> 174