← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/paper-menu-button/paper-menu-button-animations.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/paper-menu-button/paper-menu-button-animations.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/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