third_party/polymer/components/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 <!--
  11
  12 `<core-transition>` is an abstraction of an animation. It is used to implement pluggable
  13 transitions, for example in `<core-overlay>`. You can extend this class to create a custom
  14 animation, instantiate it, and import it where you need the animation.
  15
  16 All instances of `<core-transition>` are stored in a single database with `type=transition`.
  17 For more about the database, please see the documentation for `<core-meta>`.
  18
  19 Each instance of `<core-transition>` objects are shared across all the clients, so you should
  20 not store state information specific to the animated element in the transition. Rather, store
  21 it on the element.
  22
  23 Example:
  24
  25 my-transition.html:
  26
  27     <polymer-element name="my-transition" extends="core-transition">
  28         <script>
  29             go: function(node) {
  30                 node.style.transition = 'opacity 1s ease-out';
  31                 node.style.opacity = 0;
  32             }
  33         </script>
  34     </polymer-element>
  35
  36     <my-transition id="my-fade-out"></my-transition>
  37
  38 my-transition-demo.html:
  39
  40     <link href="components/core-meta/core-meta.html" rel="import">
  41     <link href="my-transition.html" rel="import">
  42
  43     <div id="animate-me"></div>
  44
  45     <script>
  46         // Get the core-transition
  47         var meta = document.createElement('core-meta');
  48         meta.type = 'transition';
  49         var transition = meta.byId('my-fade-out');
  50
  51         // Run the animation
  52         var animated = document.getElementById('animate-me');
  53         transition.go(animated);
  54     </script>
  55
  56 @group Polymer Core Elements
  57 @element core-transition
  58 @extends core-meta
  59 @status beta
  60 @homepage github.io
  61 -->
  62 <!--
  63 Fired when the animation finishes.
  64
  65 @event core-transitionend
  66 @param {Object} detail
  67 @param {Object} detail.node The animated node
  68 -->
  69
  70 <link rel="import" href="../core-meta/core-meta.html">
  71
  72 <polymer-element name="core-transition" extends="core-meta">
  73
  74   <script>
  75     Polymer('core-transition', {
  76
  77       type: 'transition',
  78
  79       /**
  80        * Run the animation.
  81        *
  82        * @method go
  83        * @param {Node} node The node to apply the animation on
  84        * @param {Object} state State info
  85        */
  86       go: function(node, state) {
  87         this.complete(node);
  88       },
  89
  90       /**
  91        * Set up the animation. This may include injecting a stylesheet,
  92        * applying styles, creating a web animations object, etc.. This
  93        *
  94        * @method setup
  95        * @param {Node} node The animated node
  96        */
  97       setup: function(node) {
  98       },
  99
 100       /**
 101        * Tear down the animation.
 102        *
 103        * @method teardown
 104        * @param {Node} node The animated node
 105        */
 106       teardown: function(node) {
 107       },
 108
 109       /**
 110        * Called when the animation completes. This function also fires the
 111        * `core-transitionend` event.
 112        *
 113        * @method complete
 114        * @param {Node} node The animated node
 115        */
 116       complete: function(node) {
 117         this.fire('core-transitionend', null, node);
 118       },
 119
 120       /**
 121        * Utility function to listen to an event on a node once.
 122        *
 123        * @method listenOnce
 124        * @param {Node} node The animated node
 125        * @param {string} event Name of an event
 126        * @param {Function} fn Event handler
 127        * @param {Array} args Additional arguments to pass to `fn`
 128        */
 129       listenOnce: function(node, event, fn, args) {
 130         var self = this;
 131         var listener = function() {
 132           fn.apply(self, args);
 133           node.removeEventListener(event, listener, false);
 134         }
 135         node.addEventListener(event, listener, false);
 136       }
 137
 138     });
 139   </script>
 140 </polymer-element>