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/web-animations.html">
13<link rel="import" href="../neon-animation/neon-animation-behavior.html">
14<script>
15  Polymer({
16    is: 'paper-menu-grow-height-animation',
17
18    behaviors: [
19      Polymer.NeonAnimationBehavior
20    ],
21
22    configure: function(config) {
23      var node = config.node;
24      var rect = node.getBoundingClientRect();
25      var height = rect.height;
26
27      this._effect = new KeyframeEffect(node, [{
28        height: (height / 2) + 'px'
29      }, {
30        height: height + 'px'
31      }], this.timingFromConfig(config));
32
33      return this._effect;
34    }
35  });
36
37  Polymer({
38    is: 'paper-menu-grow-width-animation',
39
40    behaviors: [
41      Polymer.NeonAnimationBehavior
42    ],
43
44    configure: function(config) {
45      var node = config.node;
46      var rect = node.getBoundingClientRect();
47      var width = rect.width;
48
49      this._effect = new KeyframeEffect(node, [{
50        width: (width / 2) + 'px'
51      }, {
52        width: width + 'px'
53      }], this.timingFromConfig(config));
54
55      return this._effect;
56    }
57  });
58
59  Polymer({
60    is: 'paper-menu-shrink-width-animation',
61
62    behaviors: [
63      Polymer.NeonAnimationBehavior
64    ],
65
66    configure: function(config) {
67      var node = config.node;
68      var rect = node.getBoundingClientRect();
69      var width = rect.width;
70
71      this._effect = new KeyframeEffect(node, [{
72        width: width + 'px'
73      }, {
74        width: width - (width / 20) + 'px'
75      }], this.timingFromConfig(config));
76
77      return this._effect;
78    }
79  });
80
81  Polymer({
82    is: 'paper-menu-shrink-height-animation',
83
84    behaviors: [
85      Polymer.NeonAnimationBehavior
86    ],
87
88    configure: function(config) {
89      var node = config.node;
90      var rect = node.getBoundingClientRect();
91      var height = rect.height;
92      var top = rect.top;
93
94      this.setPrefixedProperty(node, 'transformOrigin', '0 0');
95
96      this._effect = new KeyframeEffect(node, [{
97        height: height + 'px',
98        transform: 'translateY(0)'
99      }, {
100        height: height / 2 + 'px',
101        transform: 'translateY(-20px)'
102      }], this.timingFromConfig(config));
103
104      return this._effect;
105    }
106  });
107</script>
108
109
110