third_party/polymer/components-chromium/core-animation/core-animation.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 <link rel="import" href="../polymer/polymer.html">
  11 <link rel="import" href="web-animations.html">
  12
  13 <!--
  14 @group Polymer Core Elements
  15
  16 `core-animation` is a convenience element to use web animations with Polymer elements. It
  17 allows you to create a web animation declaratively. You can extend this class to create
  18 new types of animations and combine them with `core-animation-group`.
  19
  20 Example to create animation to fade out an element over 500ms:
  21
  22     <core-animation id="fadeout" duration="500">
  23       <core-animation-keyframe>
  24         <core-animation-prop name="opacity" value="1"></core-animation-prop>
  25       </core-animation-keyframe>
  26       <core-animation-keyframe>
  27         <core-animation-prop name="opacity" value="0"></core-animation-prop>
  28       </core-animation-keyframe>
  29     </core-animation>
  30
  31     <div id="el">Fade me out</div>
  32
  33     <script>
  34       var animation = document.getElementById('fadeout');
  35       animation.target = document.getElementById('el');
  36       animation.play();
  37     </script>
  38
  39 Or do the same imperatively:
  40
  41     var animation = new CoreAnimation();
  42     animation.duration = 500;
  43     animation.keyframes = [
  44       {opacity: 1},
  45       {opacity: 0}
  46     ];
  47     animation.target = document.getElementById('el');
  48     animation.play();
  49
  50 You can also provide a javascript function instead of keyframes to the animation. This
  51 behaves essentially the same as `requestAnimationFrame`:
  52
  53     var animation = new CoreAnimation();
  54     animation.customEffect = function(timeFraction, target, animation) {
  55       // do something custom
  56     };
  57     animation.play();
  58
  59 Elements that are targets to a `core-animation` are given the `core-animation-target` class.
  60
  61 @element core-animation
  62 @status beta
  63 @homepage github.io
  64 -->
  65 <polymer-element name="core-animation" constructor="CoreAnimation" attributes="target keyframes sample composite duration fill easing iterationStart iterationCount delay direction autoplay targetSelector" assetpath="">
  66
  67 </polymer-element>
  68
  69 <!--
  70 `core-animation-keyframe` represents a keyframe in a `core-animation`. Use them as children of
  71 `core-animation` elements to create web animations declaratively. If the `offset` property is
  72 unset, the keyframes will be distributed evenly within the animation duration. Use
  73 `core-animation-prop` elements as children of this element to specify the CSS properties for
  74 the animation.
  75
  76 @element core-animation-keyframe
  77 @status beta
  78 @homepage github.io
  79 -->
  80 <polymer-element name="core-animation-keyframe" attributes="offset" assetpath="">
  81
  82 </polymer-element>
  83
  84 <!--
  85 `core-animation-prop` represents a CSS property and value pair to use with
  86 `core-animation-keyframe`.
  87
  88 @element core-animation-prop
  89 @status beta
  90 @homepage github.io
  91 -->
  92 <polymer-element name="core-animation-prop" attributes="name value" assetpath="">
  93
  94 </polymer-element>
  95 <script src="core-animation-extracted.js"></script>