third_party/polymer/v1_0/components/neon-animation/animations/scale-down-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 `<scale-down-animation>` animates the scale transform of an element from 1 to 0. By default it
  17 scales in both the x and y axes.
  18
  19 Configuration:
  20 ```
  21 {
  22   name: 'scale-down-animation',
  23   node: <node>,
  24   axis: 'x' | 'y' | '',
  25   transformOrigin: <transform-origin>,
  26   timing: <animation-timing>
  27 }
  28 ```
  29 -->
  30
  31 <script>
  32
  33   Polymer({
  34
  35     is: 'scale-down-animation',
  36
  37     behaviors: [
  38       Polymer.NeonAnimationBehavior
  39     ],
  40
  41     configure: function(config) {
  42       var node = config.node;
  43
  44       if (config.transformOrigin) {
  45         this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
  46       }
  47
  48       var scaleProperty = 'scale(0, 0)';
  49       if (config.axis === 'x') {
  50         scaleProperty = 'scale(0, 1)';
  51       } else if (config.axis === 'y') {
  52         scaleProperty = 'scale(1, 0)';
  53       }
  54
  55       this._effect = new KeyframeEffect(node, [
  56         {'transform': 'scale(1,1)'},
  57         {'transform': scaleProperty}
  58       ], this.timingFromConfig(config));
  59
  60       return this._effect;
  61     }
  62
  63   });
  64
  65 </script>