• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject 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
17scales in both the x and y axes.
18
19Configuration:
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      var scaleProperty = 'scale(0, 0)';
45      if (config.axis === 'x') {
46        scaleProperty = 'scale(0, 1)';
47      } else if (config.axis === 'y') {
48        scaleProperty = 'scale(1, 0)';
49      }
50
51      this._effect = new KeyframeEffect(node, [
52        {'transform': 'scale(1,1)'},
53        {'transform': scaleProperty}
54      ], this.timingFromConfig(config));
55
56      if (config.transformOrigin) {
57        this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
58      }
59
60      return this._effect;
61    }
62
63  });
64
65</script>
66