core-transition.html

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

<!--

`<core-transition>` is an abstraction of an animation. It is used to implement pluggable
transitions, for example in `<core-overlay>`. You can extend this class to create a custom
animation, instantiate it, and import it where you need the animation.

All instances of `<core-transition>` are stored in a single database with `type=transition`.
For more about the database, please see the documentation for `<core-meta>`.

Each instance of `<core-transition>` objects are shared across all the clients, so you should
not store state information specific to the animated element in the transition. Rather, store
it on the element.

Example:

my-transition.html:

    <polymer-element name="my-transition" extends="core-transition">
        <script>
            go: function(node) {
                node.style.transition = 'opacity 1s ease-out';
                node.style.opacity = 0;
            }
        </script>
    </polymer-element>

    <my-transition id="my-fade-out"></my-transition>

my-transition-demo.html:

    <link href="components/core-meta/core-meta.html" rel="import">
    <link href="my-transition.html" rel="import">

    <div id="animate-me"></div>

    <script>
        // Get the core-transition
        var meta = document.createElement('core-meta');
        meta.type = 'transition';
        var transition = meta.byId('my-fade-out');

        // Run the animation
        var animated = document.getElementById('animate-me');
        transition.go(animated);
    </script>

@group Polymer Core Elements
@element core-transition
@extends core-meta
@status beta
@homepage github.io
-->
<!--
Fired when the animation finishes.

@event core-transitionend
@param {Object} detail
@param {Object} detail.node The animated node
-->

<link rel="import" href="../core-meta/core-meta.html">

<polymer-element name="core-transition" extends="core-meta">
  
  <script>
    Polymer('core-transition', {
      
      type: 'transition',

      /**
       * Run the animation.
       *
       * @method go
       * @param {Node} node The node to apply the animation on
       * @param {Object} state State info
       */
      go: function(node, state) {
        this.complete(node);
      },

      /**
       * Set up the animation. This may include injecting a stylesheet,
       * applying styles, creating a web animations object, etc.. This
       *
       * @method setup
       * @param {Node} node The animated node
       */
      setup: function(node) {
      },

      /**
       * Tear down the animation.
       *
       * @method teardown
       * @param {Node} node The animated node
       */
      teardown: function(node) {
      },

      /**
       * Called when the animation completes. This function also fires the
       * `core-transitionend` event.
       *
       * @method complete
       * @param {Node} node The animated node
       */
      complete: function(node) {
        this.fire('core-transitionend', null, node);
      },

      /**
       * Utility function to listen to an event on a node once.
       *
       * @method listenOnce
       * @param {Node} node The animated node
       * @param {string} event Name of an event
       * @param {Function} fn Event handler
       * @param {Array} args Additional arguments to pass to `fn`
       */
      listenOnce: function(node, event, fn, args) {
        var self = this;
        var listener = function() {
          fn.apply(self, args);
          node.removeEventListener(event, listener, false);
        };
        node.addEventListener(event, listener, false);
      }

    });
  </script>
</polymer-element>