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