From 4c23e81bbe7ac43faf0e65991a136a33d69052a2 Mon Sep 17 00:00:00 2001
From: Sandesh <sandeshdamkondwar@gmail.com>
Date: Tue, 7 Jun 2016 03:10:51 +0530
Subject: [PATCH] Added support for entry and exit animation

---
 bower.json                   |  3 ++-
 paper-fullscreen-dialog.html | 40 ++++++++++++++++++++++++++++++++----
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/bower.json b/bower.json
index 1f37445..d75857b 100644
--- a/bower.json
+++ b/bower.json
@@ -23,7 +23,8 @@
     "polymer": "Polymer/polymer#^1.0.0",
     "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
     "paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#^1.0.0",
-    "paper-header-panel": "PolymerElements/paper-header-panel#^1.0.0"
+    "paper-header-panel": "PolymerElements/paper-header-panel#^1.0.0",
+    "neon-animation": "PolymerElements/neon-animation#^1.0.0"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
diff --git a/paper-fullscreen-dialog.html b/paper-fullscreen-dialog.html
index b2232f5..27d31d2 100644
--- a/paper-fullscreen-dialog.html
+++ b/paper-fullscreen-dialog.html
@@ -56,7 +56,7 @@
     </paper-fullscreen-dialog>
 
 @element paper-fullscreen-dialog
-@blurb Element providing a full-screen dialog with dismissive and confirmation actions 
+@blurb Element providing a full-screen dialog with dismissive and confirmation actions
 @status alpha
 @homepage https://github.com/bendavis78/paper-fullscreen-dialog
 @demo demo/index.html
@@ -68,6 +68,7 @@
 <link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
 <link rel="import" href="../paper-header-panel/paper-header-panel.html">
 <link rel="import" href="../paper-styles/paper-styles.html">
+<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
 
 <dom-module id="paper-fullscreen-dialog">
   <style>
@@ -143,7 +144,7 @@
     <div id="backdrop"></div>
     <div id="overlay">
       <paper-header-panel main id="headerPanel" class="no-padding" mode="{{mode}}">
-        <content select=".toolbar"></content> 
+        <content select=".toolbar"></content>
         <div id="scroller" class="flex">
           <content select="*"></content>
         </div>
@@ -163,7 +164,7 @@
 
       properties: {
         /**
-         * When the browser window size is larger than the `responsiveWidth`, 
+         * When the browser window size is larger than the `responsiveWidth`,
          * the dialog becomes a modal dialog with a backdrop.
          *
          * @attribute responsiveWidth
@@ -190,7 +191,14 @@
         },
       },
 
-      behaviors: [Polymer.PaperDialogBehavior],
+      behaviors: [
+        Polymer.PaperDialogBehavior,
+        Polymer.NeonAnimationRunnerBehavior
+      ],
+
+      listeners: {
+        'neon-animation-finish': '_onNeonAnimationFinish'
+      },
 
       attached: function() {
         this.sizingTarget = this.$.scroller;
@@ -208,6 +216,30 @@
         this._setOpened(false);
       },
 
+      _renderOpened: function() {
+        this.cancelAnimation();
+        if (this.withBackdrop) {
+          this.backdropElement.open();
+        }
+        this.playAnimation('entry');
+      },
+
+      _renderClosed: function() {
+        this.cancelAnimation();
+        if (this.withBackdrop) {
+          this.backdropElement.close();
+        }
+        this.playAnimation('exit');
+      },
+
+      _onNeonAnimationFinish: function() {
+        if (this.opened) {
+          this._finishRenderOpened();
+        } else {
+          this._finishRenderClosed();
+        }
+      },
+
       _computeMediaQuery: function(responsiveWidth) {
         var mq = '(max-width: ' + responsiveWidth + ')';
         return mq;