third_party/polymer/components/core-animated-pages/transitions/slide-up.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="slide-up">
  13   polyfill-next-selector { content: ':host.slide-up > * [slide-up]'; }
  14   :host(.slide-up) ::content > * /deep/ [slide-up] {
  15     -webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
  16     transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
  17   }
  18
  19   polyfill-next-selector { content: ':host > .core-selected [slide-up]'; }
  20   ::content > .core-selected /deep/ [slide-up] {
  21     -webkit-transform: none;
  22     transform: none;
  23   }
  24
  25   polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-up]'; }
  26   ::content > [animate]:not(.core-selected) /deep/ [slide-up] {
  27     -webkit-transform: translateY(150%);
  28     transform: translateY(150%);
  29   }
  30 </core-style>
  31
  32 <core-style id="slide-up-offscreen">
  33   polyfill-next-selector { content: ':host.slide-up-offscreen > * [slide-up-offscreen]'; }
  34   :host(.slide-up-offscreen) ::content > * /deep/ [slide-up-offscreen] {
  35     -webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
  36     transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
  37   }
  38
  39   polyfill-next-selector { content: ':host > .core-selected [slide-up-offscreen]'; }
  40   ::content > .core-selected /deep/ [slide-up-offscreen] {
  41     -webkit-transform: none;
  42     transform: none;
  43   }
  44
  45   polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-up-offscreen]'; }
  46   ::content > [animate]:not(.core-selected) /deep/ [slide-up-offscreen] {
  47     -webkit-transform: translateY(100vh);
  48     transform: translateY(100vh);
  49     z-index: -1;
  50   }
  51
  52   polyfill-rule {
  53     content: ':host > [animate]:not(.core-selected) [slide-up-offscreen]';
  54     -webkit-transform: translateY(1000px);
  55   }
  56 </core-style>
  57
  58 <!--
  59
  60 `slide-up` slides an element in the outgoing page from the bottom of the window
  61 and slides in an element in the incoming page from the bottom of the window during
  62 a page transition. You can configure the duration of the transition with the global
  63 variable `CoreStyle.g.transitions.slideDuration`.
  64
  65 Example:
  66
  67     <core-animated-pages transition="slide-up">
  68       <section>
  69         <div id="div1" slide-up></div>
  70       </section>
  71       <section></section>
  72     </core-animated-pages>
  73
  74 @class slide-up
  75 @extends core-transition-pages
  76 @status beta
  77 @homepage github.io
  78
  79 -->
  80
  81 <core-transition-pages id="slide-up" activeClass="slide-up"></core-transition-pages>
  82 <core-transition-pages id="slide-up-offscreen" activeClass="slide-up-offscreen"></core-transition-pages>