| Index: third_party/polymer/components-chromium/core-animated-pages/transitions/cross-fade.html
|
| diff --git a/third_party/polymer/components-chromium/core-animated-pages/transitions/cross-fade.html b/third_party/polymer/components-chromium/core-animated-pages/transitions/cross-fade.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..4bfdf02a6046ff93fbf5da60aa61a4332b0ea859
|
| --- /dev/null
|
| +++ b/third_party/polymer/components-chromium/core-animated-pages/transitions/cross-fade.html
|
| @@ -0,0 +1,173 @@
|
| +<!--
|
| +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="cross-fade">
|
| + polyfill-next-selector { content: ':host > * [cross-fade]'; }
|
| + ::content > * /deep/ [cross-fade] {
|
| + -webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
| + transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host > * [cross-fade][bg]'; }
|
| + ::content > * /deep/ [cross-fade][bg] {
|
| + -webkit-transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
| + transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host > * [cross-fade][hero-p]'; }
|
| + ::content > * /deep/ [cross-fade][hero-p] {
|
| + -webkit-transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
| + transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host > .core-selected [cross-fade]'; }
|
| + ::content > .core-selected /deep/ [cross-fade] {
|
| + opacity: 1;
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade]:not([hero-p]):not([bg])'; }
|
| + ::content > [animate]:not(.core-selected) /deep/ [cross-fade]:not([hero-p]):not([bg]) {
|
| + opacity: 0;
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade][bg]'; }
|
| + ::content > [animate]:not(.core-selected) /deep/ [cross-fade][bg] {
|
| + background-color: rgba(0, 0, 0, 0);
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade][hero-p]'; }
|
| + ::content > [animate]:not(.core-selected) /deep/ [cross-fade][hero-p] {
|
| + background-color: rgba(0, 0, 0, 0);
|
| + }
|
| +</core-style>
|
| +
|
| +<core-style id="cross-fade-delayed">
|
| + polyfill-next-selector { content: ':host > * [cross-fade-delayed]'; }
|
| + ::content > * /deep/ [cross-fade-delayed] {
|
| + -webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
| + transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host > .core-selected [cross-fade-delayed]'; }
|
| + ::content > .core-selected /deep/ [cross-fade-delayed] {
|
| + -webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out {{g.transitions.xfadeDelay || g.transitions.xfadeDuration || g.transitions.duration}};
|
| + transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out {{g.transitions.xfadeDelay || g.transitions.xfadeDuration || g.transitions.duration}};
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade-delayed]'; }
|
| + ::content > [animate]:not(.core-selected) /deep/ [cross-fade-delayed] {
|
| + opacity: 0;
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host > .core-selected [cross-fade-delayed]'; }
|
| + ::content > .core-selected /deep/ [cross-fade-delayed] {
|
| + opacity: 1;
|
| + }
|
| +
|
| +</core-style>
|
| +
|
| +<core-style id="cross-fade-all">
|
| + /* cross-fade-all: cross fade everything except for heroes and their parents */
|
| + polyfill-next-selector { content: ':host(.cross-fade-all) > * *:not([hero]):not([hero-p]):not([cross-fade])'; }
|
| + :host(.cross-fade-all) ::content > * /deep/ *:not([hero]):not([hero-p]):not([cross-fade]) {
|
| + -webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
| + transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host(.cross-fade-all) > [animate]:not(.core-selected) *:not([hero]):not([hero-p]):not([cross-fade])'; }
|
| + :host(.cross-fade-all) ::content > [animate]:not(.core-selected) /deep/ *:not([hero]):not([hero-p]):not([cross-fade]) {
|
| + opacity: 0;
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host(.cross-fade-all) > .core-selected *:not([hero])'; }
|
| + .host(.cross-fade-all) ::content > .core-selected /deep/ * {
|
| + opacity: 1;
|
| + }
|
| +
|
| + /* Only background-color is allowed for the hero's parents, no opacity transitions */
|
| + polyfill-next-selector { content: ':host(.cross-fade-all) > * [hero-p]'; }
|
| + :host(.cross-fade-all) ::content > * /deep/ [hero-p] {
|
| + -webkit-transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
| + transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
| + opacity: 1;
|
| + }
|
| +
|
| + polyfill-next-selector { content: ':host(.cross-fade-all) > [animate]:not(.core-selected) [hero-p]'; }
|
| + :host(.cross-fade-all) ::content > [animate]:not(.core-selected) /deep/ [hero-p] {
|
| + background-color: rgba(0, 0, 0, 0);
|
| + }
|
| +</core-style>
|
| +
|
| +<!--
|
| +
|
| +`cross-fade` fades out elements in the outgoing page and fades in elements in the
|
| +incoming page during a page transition. You can configure the duration of the
|
| +transition with the global variable `CoreStyle.g.transitions.xfadeDuration`.
|
| +
|
| +Example:
|
| +
|
| + <core-animated-pages transition="cross-fade">
|
| + <section>
|
| + <div id="div1" cross-fade></div>
|
| + </section>
|
| + <section>
|
| + <div id="div2" cross-fade bg>
|
| + <div id="div3" cross-fade></div>
|
| + <div id="div4"></div>
|
| + </div>
|
| + </section>
|
| + </core-animated-pages>
|
| +
|
| +In the above example, `#div1` and `#div3` has the `cross-fade` attribute. `#div1`
|
| +will fade out and `#div3` will fade in with opacity transitions when the page switches
|
| +from 0 to 1. Sometimes, you may want to only fade the background color of an element
|
| +but not its children, and you can use the `bg` attribute along with the `#div1`
|
| +attribute as in `#div2`.
|
| +
|
| +@class cross-fade
|
| +@extends core-transition-pages
|
| +@status beta
|
| +@homepage github.io
|
| +
|
| +-->
|
| +
|
| +<!--
|
| +
|
| +`cross-fade-delayed` performs a cross-fade after some delay, either specified in
|
| +the global variable `CoreStyle.g.transitions.xfadeDelay` or the duration of the
|
| +transition.
|
| +
|
| +Example:
|
| +
|
| + <core-animated-pages transition="hero-transition cross-fade-delayed">
|
| + <section>
|
| + <div id="div1" hero-id hero></div>
|
| + </section>
|
| + <section>
|
| + <div id="div2" hero-id hero>
|
| + <div id="div3" cross-fade-delayed></div>
|
| + </div>
|
| + </section>
|
| + </core-animated-pages>
|
| +
|
| +In the above example, `#div3` fades in after the hero transition from `#div1` to
|
| +`#div2` completes.
|
| +
|
| +@class cross-fade-delayed
|
| +@extends core-transition-pages
|
| +@status beta
|
| +@homepage github.io
|
| +
|
| +-->
|
| +
|
| +<core-transition-pages id="cross-fade"></core-transition-pages>
|
| +<core-transition-pages id="cross-fade-delayed"></core-transition-pages>
|
| +<core-transition-pages id="cross-fade-all" scopeClass="cross-fade-all"></core-transition-pages>
|
|
|