| Index: third_party/polymer/components/core-animated-pages/transitions/slide-up.html
|
| diff --git a/third_party/polymer/components/core-animated-pages/transitions/slide-up.html b/third_party/polymer/components/core-animated-pages/transitions/slide-up.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..33533cfa33cf738ca07765cc174043467bc9cf30
|
| --- /dev/null
|
| +++ b/third_party/polymer/components/core-animated-pages/transitions/slide-up.html
|
| @@ -0,0 +1,82 @@
|
| +<!--
|
| +Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
| +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
| +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
| +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
| +Code distributed by Google as part of the polymer project is also
|
| +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
| +-->
|
| +
|
| +<link href="core-transition-pages.html" rel="import">
|
| +
|
| +<core-style id="slide-up">
|
| + polyfill-next-selector { content: ':host.slide-up > * [slide-up]'; }
|
| + :host(.slide-up) ::content > * /deep/ [slide-up] {
|
| + -webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
| + transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host > .core-selected [slide-up]'; }
|
| + ::content > .core-selected /deep/ [slide-up] {
|
| + -webkit-transform: none;
|
| + transform: none;
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-up]'; }
|
| + ::content > [animate]:not(.core-selected) /deep/ [slide-up] {
|
| + -webkit-transform: translateY(150%);
|
| + transform: translateY(150%);
|
| + }
|
| +</core-style>
|
| +
|
| +<core-style id="slide-up-offscreen">
|
| + polyfill-next-selector { content: ':host.slide-up-offscreen > * [slide-up-offscreen]'; }
|
| + :host(.slide-up-offscreen) ::content > * /deep/ [slide-up-offscreen] {
|
| + -webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
| + transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host > .core-selected [slide-up-offscreen]'; }
|
| + ::content > .core-selected /deep/ [slide-up-offscreen] {
|
| + -webkit-transform: none;
|
| + transform: none;
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-up-offscreen]'; }
|
| + ::content > [animate]:not(.core-selected) /deep/ [slide-up-offscreen] {
|
| + -webkit-transform: translateY(100vh);
|
| + transform: translateY(100vh);
|
| + z-index: -1;
|
| + }
|
| +
|
| + polyfill-rule {
|
| + content: ':host > [animate]:not(.core-selected) [slide-up-offscreen]';
|
| + -webkit-transform: translateY(1000px);
|
| + }
|
| +</core-style>
|
| +
|
| +<!--
|
| +
|
| +`slide-up` slides an element in the outgoing page from the bottom of the window
|
| +and slides in an element in the incoming page from the bottom of the window during
|
| +a page transition. You can configure the duration of the transition with the global
|
| +variable `CoreStyle.g.transitions.slideDuration`.
|
| +
|
| +Example:
|
| +
|
| + <core-animated-pages transition="slide-up">
|
| + <section>
|
| + <div id="div1" slide-up></div>
|
| + </section>
|
| + <section></section>
|
| + </core-animated-pages>
|
| +
|
| +@class slide-up
|
| +@extends core-transition-pages
|
| +@status beta
|
| +@homepage github.io
|
| +
|
| +-->
|
| +
|
| +<core-transition-pages id="slide-up" activeClass="slide-up"></core-transition-pages>
|
| +<core-transition-pages id="slide-up-offscreen" activeClass="slide-up-offscreen"></core-transition-pages>
|
|
|