<!-- Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <link rel="import" href="../../../polymer/polymer.html"> <link rel="import" href="../../../paper-styles/paper-styles.html"> <link rel="import" href="../../neon-animation-runner-behavior.html"> <link rel="import" href="../../animations/scale-up-animation.html"> <link rel="import" href="../../animations/fade-out-animation.html"> <dom-module id="my-dialog"> <style> :host { display: none; padding: 16px; background: white; color: black; margin: 0 auto; @apply(--shadow-elevation-2dp); } </style> <template> <content></content> </template> </dom-module> <script> Polymer({ is: 'my-dialog', behaviors: [ Polymer.NeonAnimationRunnerBehavior ], properties: { opened: { type: Boolean }, animationConfig: { type: Object, value: function() { return { 'entry': [{ name: 'scale-up-animation', node: this }], 'exit': [{ name: 'fade-out-animation', node: this }] } } } }, listeners: { 'neon-animation-finish': '_onAnimationFinish' }, _onAnimationFinish: function() { if (!this.opened) { this.style.display = ''; } }, show: function() { this.opened = true; this.style.display = 'inline-block'; this.playAnimation('entry'); }, hide: function() { this.opened = false; this.playAnimation('exit'); } }); </script>