src/third_party/polymer/components-chromium/core-animated-pages/transitions/list-cascade.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
  13 <core-style id="list-cascade">
  14   polyfill-next-selector { content: ':host.list-cascade > * [list-cascade]'; }
  15   :host(.list-cascade) ::content > * [list-cascade] * {
  16     -webkit-transition: -webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.cascade || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
  17     transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.cascade || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
  18   }
  19
  20   polyfill-next-selector { content: ':host > .core-selected [list-cascade] *'; }
  21   ::content > .core-selected [list-cascade] * {
  22     -webkit-transform: none;
  23     transform: none;
  24   }
  25
  26   polyfill-next-selector { content: ':host > *:not(.core-selected) [list-cascade] *'; }
  27   ::content > *:not(.core-selected) [list-cascade] * {
  28     -webkit-transform: translateY(200%);
  29     transform: translateY(200%);
  30     opacity: 0.2;
  31   }
  32
  33   polyfill-next-selector { content: ':host > .core-selected [list-cascade] *:nth-child(2)'; }
  34   ::content > .core-selected [list-cascade] *:nth-child(2) {
  35     -webkit-transition-delay: 0.1s;
  36     transition-delay: 0.1s;
  37   }
  38
  39   polyfill-next-selector { content: ':host > .core-selected [list-cascade] *:nth-child(3)'; }
  40   ::content > .core-selected [list-cascade] *:nth-child(3) {
  41     -webkit-transition-delay: 0.2s;
  42     transition-delay: 0.2s;
  43   }
  44
  45   polyfill-next-selector { content: ':host > .core-selected [list-cascade] *:nth-child(4)'; }
  46   ::content > .core-selected [list-cascade] *:nth-child(4) {
  47     -webkit-transition-delay: 0.3s;
  48     transition-delay: 0.3s;
  49   }
  50
  51   polyfill-next-selector { content: ':host > .core-selected [list-cascade] *:nth-child(5)'; }
  52   ::content > .core-selected [list-cascade] *:nth-child(5) {
  53     -webkit-transition-delay: 0.4s;
  54     transition-delay: 0.4s;
  55   }
  56 </core-style>
  57
  58 <core-transition-pages id="list-cascade" activeClass="list-cascade"></core-transition-pages>