Home | History | Annotate | Download | only in paper-menu-button 
      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 
    110