third_party/polymer/components-chromium/core-transition/core-transition.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <!--
  11
  12 `<core-transition>` is an abstraction of an animation. It is used to implement pluggable
  13 transitions, for example in `<core-overlay>`. You can extend this class to create a custom
  14 animation, instantiate it, and import it where you need the animation.
  15
  16 All instances of `<core-transition>` are stored in a single database with `type=transition`.
  17 For more about the database, please see the documentation for `<core-meta>`.
  18
  19 Each instance of `<core-transition>` objects are shared across all the clients, so you should
  20 not store state information specific to the animated element in the transition. Rather, store
  21 it on the element.
  22
  23 Example:
  24
  25 my-transition.html:
  26
  27     <polymer-element name="my-transition" extends="core-transition">
  28         <script>
  29             go: function(node) {
  30                 node.style.transition = 'opacity 1s ease-out';
  31                 node.style.opacity = 0;
  32             }
  33         </script>
  34     </polymer-element>
  35
  36     <my-transition id="my-fade-out"></my-transition>
  37
  38 my-transition-demo.html:
  39
  40     <link href="components/core-meta/core-meta.html" rel="import">
  41     <link href="my-transition.html" rel="import">
  42
  43     <div id="animate-me"></div>
  44
  45     <script>
  46         // Get the core-transition
  47         var meta = document.createElement('core-meta');
  48         meta.type = 'transition';
  49         var transition = meta.byId('my-fade-out');
  50
  51         // Run the animation
  52         var animated = document.getElementById('animate-me');
  53         transition.go(animated);
  54     </script>
  55
  56 @group Polymer Core Elements
  57 @element core-transition
  58 @extends core-meta
  59 @status beta
  60 @homepage github.io
  61 -->
  62 <!--
  63 Fired when the animation finishes.
  64
  65 @event core-transitionend
  66 @param {Object} detail
  67 @param {Object} detail.node The animated node
  68 -->
  69
  70 <link rel="import" href="../core-meta/core-meta.html">
  71
  72 <polymer-element name="core-transition" extends="core-meta" assetpath="">
  73
  74
  75 </polymer-element><script src="core-transition-extracted.js"></script>