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