| Index: third_party/polymer/components-chromium/core-animated-pages/transitions/hero-transition.html
|
| diff --git a/third_party/polymer/components-chromium/core-animated-pages/transitions/hero-transition.html b/third_party/polymer/components-chromium/core-animated-pages/transitions/hero-transition.html
|
| deleted file mode 100644
|
| index f53c5ce4f359e0c59998299932f6a784dfdd23f0..0000000000000000000000000000000000000000
|
| --- a/third_party/polymer/components-chromium/core-animated-pages/transitions/hero-transition.html
|
| +++ /dev/null
|
| @@ -1,97 +0,0 @@
|
| -<!--
|
| -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
|
| ---><html><head><link href="core-transition-pages.html" rel="import">
|
| -
|
| -</head><body><core-style id="hero-transition">
|
| - /* Hide heroes that are not currently transitioning */
|
| - polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [hero]'; }
|
| - ::content > [animate]:not(.core-selected) /deep/ [hero] {
|
| - opacity: 0;
|
| - }
|
| -
|
| - polyfill-next-selector { content: ':host > .core-selected[animate] [hero]'; }
|
| - ::content > .core-selected[animate] /deep/ [hero] {
|
| - opacity: 1;
|
| - z-index: 10000;
|
| - }
|
| -
|
| - polyfill-next-selector { content: ':host > * [hero-p]'; }
|
| - ::content > * /deep/ [hero-p] {
|
| - -webkit-transition: box-shadow 100ms ease-out;
|
| - transition: box-shadow 100ms ease-out;
|
| - }
|
| -
|
| - polyfill-next-selector { content: ':host > [animate] [hero-p]'; }
|
| - ::content > [animate] /deep/ [hero-p] {
|
| - box-shadow: none !important;
|
| - }
|
| -</core-style>
|
| -
|
| -
|
| -<!--
|
| -
|
| -`hero-transition` transforms two elements in different pages such that they appear
|
| -to be shared across the pages.
|
| -
|
| -Example:
|
| -
|
| - <core-animated-pages transition="hero-transition">
|
| - <section layout horizontal>
|
| - <div id="div1" flex></div>
|
| - <div id="div2" flex hero-id="shared" hero></div>
|
| - </section>
|
| - <section>
|
| - <section layout horizontal>
|
| - <div id="div3" flex hero-id="shared" hero></div>
|
| - <div id="div4" flex></div>
|
| - </section>
|
| - </section>
|
| - </core-animated-pages>
|
| -
|
| -In the above example, the elements `#div2` and `#div3` shares the same `hero-id`
|
| -attribute and a single element appears to translate and scale smoothly between
|
| -the two positions during a page transition.
|
| -
|
| -Both elements from the source and destination pages must share the same `hero-id`
|
| -and must both contain the `hero` attribute to trigger the transition. The separate
|
| -`hero` attribute allows you to use binding to configure the transition:
|
| -
|
| -Example:
|
| -
|
| - <core-animated-pages transition="hero-transition">
|
| - <section layout horizontal>
|
| - <div id="div1" flex hero-id="shared" hero?="{{selected == 0}}"></div>
|
| - <div id="div2" flex hero-id="shared" hero?="{{selected == 1}}"></div>
|
| - </section>
|
| - <section>
|
| - <section layout horizontal>
|
| - <div id="div3" flex hero-id="shared" hero></div>
|
| - </section>
|
| - </section>
|
| - </core-animated-pages>
|
| -
|
| -In the above example, either `#div1` or `#div2` scales to `#div3` during a page transition,
|
| -depending on the value of `selected`.
|
| -
|
| -Because it is common to share elements with different `border-radius` values, by default
|
| -this transition will also animate the `border-radius` property.
|
| -
|
| -You can configure the duration of the hero transition with the global variable
|
| -`CoreStyle.g.transitions.heroDuration`.
|
| -
|
| -@class hero-transition
|
| -@extends core-transition-pages
|
| -@status beta
|
| -@homepage github.io
|
| --->
|
| -<polymer-element name="hero-transition" extends="core-transition-pages" assetpath="">
|
| -
|
| -</polymer-element>
|
| -
|
| -<hero-transition id="hero-transition"></hero-transition>
|
| -<script charset="utf-8" src="hero-transition-extracted.js"></script></body></html>
|
|
|