Fix re-opening before closing animation end and vice versa

vaadin · Sep 19, 2018 · 04d26e8 · 04d26e8
1 parent ed9a39e
commit 04d26e8
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 18 deletions.
diff --git a/src/vaadin-overlay.html b/src/vaadin-overlay.html
@@ -548,18 +548,45 @@
         }
       }
 
+      _shouldAnimate() {
+        const name = getComputedStyle(this).getPropertyValue('animation-name');
+        return name && name != 'none';
+      }
+
+      _enqueueAnimation(type, callback) {
+        const handler = `__${type}Handler`;
+        const listener = () => {
+          callback();
+          this.removeEventListener('animationend', listener);
+          delete this[handler];
+        };
+        this[handler] = listener;
+        this.addEventListener('animationend', listener);
+      }
+
+      _flushAnimation(type) {
+        const handler = `__${type}Handler`;
+        if (typeof this[handler] === 'function') {
+          this[handler]();
+        }
+      }
+
       _animatedOpening() {
+        if (this.parentNode === document.body && this.hasAttribute('closing')) {
+          this._flushAnimation('closing');
+        }
         this._attachOverlay();
         this.setAttribute('opening', '');
-        const name = getComputedStyle(this).getPropertyValue('animation-name');
-        if (name && name != 'none') {
-          const listener = () => {
-            this.removeEventListener('animationend', listener);
-            this.removeAttribute('opening');
-          };
-          this.addEventListener('animationend', listener);
-        } else {
+
+        const finishOpening = () => {
+          this._detachOverlay();
           this.removeAttribute('opening');
+        };
+
+        if (this._shouldAnimate()) {
+          this._enqueueAnimation('opening', finishOpening);
+        } else {
+          finishOpening();
         }
       }
 
@@ -570,19 +597,21 @@
       }
 
       _animatedClosing() {
+        if (this.hasAttribute('opening')) {
+          this._flushAnimation('opening');
+        }
         if (this._placeholder) {
           this.setAttribute('closing', '');
-          const name = getComputedStyle(this).getPropertyValue('animation-name');
-          if (name && name != 'none') {
-            const listener = () => {
-              this._detachOverlay();
-              this.removeAttribute('closing');
-              this.removeEventListener('animationend', listener);
-            };
-            this.addEventListener('animationend', listener);
-          } else {
+
+          const finishClosing = () => {
             this._detachOverlay();
             this.removeAttribute('closing');
+          };
+
+          if (this._shouldAnimate()) {
+            this._enqueueAnimation('closing', finishClosing);
+          } else {
+            finishClosing();
           }
         }
       }

diff --git a/test/animations.html b/test/animations.html
@@ -0,0 +1,64 @@
+<!doctype html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-overlay tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../vaadin-overlay.html">
+</head>
+
+<body>
+
+  <test-fixture id="default">
+    <template>
+      <vaadin-overlay>
+        <template>
+          overlay-content
+        </template>
+      </vaadin-overlay>
+    </template>
+  </test-fixture>
+
+  <script>
+    describe('animated overlay', () => {
+      let overlay;
+
+      beforeEach(() => {
+        overlay = fixture('default');
+
+        sinon.stub(overlay, '_shouldAnimate', () => true);
+
+        sinon.stub(overlay, '_enqueueAnimation', type => {
+          const handler = `__${type}Handler`;
+          overlay[handler] = Polymer.Debouncer.debounce(overlay[handler], Polymer.Async.timeOut, () => {
+            overlay.removeAttribute(type);
+          });
+        });
+
+        sinon.stub(overlay, '_flushAnimation', type => {
+          const handler = `__${type}Handler`;
+          overlay[handler].flush();
+        });
+      });
+
+      it('should remove overlay when closed while opening animation is in progress', () => {
+        overlay.opened = true;
+        overlay._flushAnimation('opening');
+
+        overlay.opened = false;
+        overlay.opened = true;
+
+        expect(overlay.hasAttribute('closing')).to.be.false;
+      });
+
+      it('should remove overlay when closed while opening animation is in progress', () => {
+        overlay.opened = true;
+        overlay.opened = false;
+
+        expect(overlay.hasAttribute('opening')).to.be.false;
+      });
+    });
+  </script>
+</body>
diff --git a/test/test-suites.js b/test/test-suites.js
@@ -8,5 +8,7 @@ window.VaadinOverlaySuites = [
   'styling.html',
   'styling.html?wc-shadydom=true',
   'templating.html',
-  'templating.html?wc-shadydom=true'
+  'templating.html?wc-shadydom=true',
+  'animations.html',
+  'animations.html?wc-shadydom=true',
 ];