140 lines
4 KiB
HTML
140 lines
4 KiB
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>
|