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<link rel="import" href="../../../polymer/polymer.html"> 11<link rel="import" href="../../../paper-styles/shadow.html"> 12<link rel="import" href="../../neon-animation-runner-behavior.html"> 13 14<dom-module id="animated-dropdown"> 15 <template> 16 <style> 17 :host { 18 display: none; 19 padding: 16px; 20 background: white; 21 color: black; 22 23 @apply(--shadow-elevation-2dp); 24 } 25 </style> 26 <content></content> 27 </template> 28</dom-module> 29 30<script> 31 32 Polymer({ 33 34 is: 'animated-dropdown', 35 36 behaviors: [ 37 Polymer.NeonAnimationRunnerBehavior 38 ], 39 40 properties: { 41 42 animationConfig: { 43 type: Object, 44 value: function() { 45 return { 46 'entry': [{ 47 name: 'scale-up-animation', 48 node: this, 49 transformOrigin: '0 0' 50 }], 51 'exit': [{ 52 name: 'fade-out-animation', 53 node: this 54 }] 55 } 56 } 57 }, 58 59 _showing: { 60 type: Boolean, 61 value: false 62 } 63 64 }, 65 66 listeners: { 67 'neon-animation-finish': '_onAnimationFinish' 68 }, 69 70 _onAnimationFinish: function() { 71 if (this._showing) { 72 } else { 73 this.style.display = ''; 74 } 75 }, 76 77 show: function() { 78 this.style.display = 'inline-block'; 79 this._showing = true; 80 this.playAnimation('entry'); 81 }, 82 83 hide: function() { 84 this._showing = false; 85 this.playAnimation('exit'); 86 } 87 88 }); 89 90</script> 91