third_party/polymer/v0_8/components-chromium/neon-animation/neon-animated-pages.html

   1 <!--
   2 Copyright (c) 2015 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 --><html><head><link rel="import" href="../polymer/polymer.html">
   9 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
  10 <link rel="import" href="../iron-selector/iron-selectable.html">
  11 <link rel="import" href="../paper-styles/paper-styles.html">
  12 <link rel="import" href="neon-animation-runner-behavior.html">
  13 <link rel="import" href="animations/opaque-animation.html">
  14
  15 <!--
  16 `neon-animated-pages` manages a set of pages and runs an animation when switching between them. Its
  17 children pages should implement `Polymer.NeonAnimatableBehavior` and define `entry` and `exit`
  18 animations to be run when switching to or switching out of the page.
  19
  20 @group Neon Elements
  21 @element neon-animated-pages
  22 @demo demo/index.html
  23 -->
  24
  25 </head><body><dom-module id="neon-animated-pages">
  26
  27   <style>
  28
  29     :host {
  30       display: block;
  31       position: relative;
  32     }
  33
  34     :host > ::content > * {
  35       @apply(--layout-fit);
  36       height: 100%;
  37     }
  38
  39     :host > ::content > :not(.iron-selected):not(.neon-animating) {
  40       display: none !important;
  41     }
  42
  43     :host > ::content > .neon-animating {
  44       pointer-events: none;
  45     }
  46
  47   </style>
  48
  49   <template>
  50     <content id="content"></content>
  51   </template>
  52
  53 </dom-module>
  54
  55 <script src="neon-animated-pages-extracted.js"></script></body></html>