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> |