third_party/polymer/components/core-animated-pages/transitions/cross-fade.html

   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.github.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/CONTRIBUTORS.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/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
 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 switches
 131 from 0 to 1. Sometimes, you may want to only fade the background color of an element
 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-transition-pages>