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