third_party/polymer/v1_0/components/neon-animation/animations/transform-animation.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10
  11 <link rel="import" href="../../polymer/polymer.html">
  12 <link rel="import" href="../neon-animation-behavior.html">
  13 <link rel="import" href="../web-animations.html">
  14
  15 <!--
  16 `<transform-animation>` animates a custom transform on an element. Use this to animate multiple
  17 transform properties, or to apply a custom transform value.
  18
  19 Configuration:
  20 ```
  21 {
  22   name: 'transform-animation',
  23   node: <node>,
  24   transformOrigin: <transform-origin>,
  25   transformFrom: <transform-from-string>,
  26   transformTo: <transform-to-string>,
  27   timing: <animation-timing>
  28 }
  29 ```
  30 -->
  31
  32 <script>
  33
  34   Polymer({
  35
  36     is: 'transform-animation',
  37
  38     behaviors: [
  39       Polymer.NeonAnimationBehavior
  40     ],
  41
  42     /**
  43      * @param {{
  44      *   node: !Element,
  45      *   transformOrigin: (string|undefined),
  46      *   transformFrom: (string|undefined),
  47      *   transformTo: (string|undefined),
  48      *   timing: (Object|undefined)
  49      * }} config
  50      */
  51     configure: function(config) {
  52       var node = config.node;
  53       var transformFrom = config.transformFrom || 'none';
  54       var transformTo = config.transformTo || 'none';
  55
  56       if (config.transformOrigin) {
  57         this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
  58       }
  59
  60       this._effect = new KeyframeEffect(node, [
  61         {'transform': transformFrom},
  62         {'transform': transformTo}
  63       ], this.timingFromConfig(config));
  64
  65       return this._effect;
  66     }
  67
  68   });
  69
  70 </script>