third_party/polymer/components-chromium/core-transition/core-transition.html

   1 <!--
   2 Copyright (c) 2014 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 --><!--
   9
  10 `<core-transition>` is an abstraction of an animation. It is used to implement pluggable
  11 transitions, for example in `<core-overlay>`. You can extend this class to create a custom
  12 animation, instantiate it, and import it where you need the animation.
  13
  14 All instances of `<core-transition>` are stored in a single database with `type=transition`.
  15 For more about the database, please see the documentation for `<core-meta>`.
  16
  17 Each instance of `<core-transition>` objects are shared across all the clients, so you should
  18 not store state information specific to the animated element in the transition. Rather, store
  19 it on the element.
  20
  21 Example:
  22
  23 my-transition.html:
  24
  25     <polymer-element name="my-transition" extends="core-transition">
  26         <script>
  27             go: function(node) {
  28                 node.style.transition = 'opacity 1s ease-out';
  29                 node.style.opacity = 0;
  30             }
  31         </script>
  32     </polymer-element>
  33
  34     <my-transition id="my-fade-out"></my-transition>
  35
  36 my-transition-demo.html:
  37
  38     <link href="components/core-meta/core-meta.html" rel="import">
  39     <link href="my-transition.html" rel="import">
  40
  41     <div id="animate-me"></div>
  42
  43     <script>
  44         // Get the core-transition
  45         var meta = document.createElement('core-meta');
  46         meta.type = 'transition';
  47         var transition = meta.byId('my-fade-out');
  48
  49         // Run the animation
  50         var animated = document.getElementById('animate-me');
  51         transition.go(animated);
  52     </script>
  53
  54 @group Polymer Core Elements
  55 @element core-transition
  56 @extends core-meta
  57 @status beta
  58 @homepage github.io
  59 --><!--
  60 Fired when the animation finishes.
  61
  62 @event core-transitionend
  63 @param {Object} detail
  64 @param {Object} detail.node The animated node
  65 --><html><head><link rel="import" href="../core-meta/core-meta.html">
  66
  67 </head><body><polymer-element name="core-transition" extends="core-meta" assetpath="">
  68
  69
  70 </polymer-element>
  71 <script charset="utf-8" src="core-transition-extracted.js"></script></body></html>