| Index: third_party/polymer/components-chromium/core-transition/core-transition.html
|
| diff --git a/third_party/polymer/components-chromium/core-transition/core-transition.html b/third_party/polymer/components-chromium/core-transition/core-transition.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..3cf94b157e045159bf971edcb43ae469f8b57307
|
| --- /dev/null
|
| +++ b/third_party/polymer/components-chromium/core-transition/core-transition.html
|
| @@ -0,0 +1,75 @@
|
| +<!--
|
| +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" assetpath="">
|
| +
|
| +
|
| +</polymer-element><script src="core-transition-extracted.js"></script>
|
|
|