fix(offcanvas): changed animations to be like in Bootstrap 5.2.0 JS (#…

…4366) fix(offcanvas): change animations to be like in Bootstrap 5.2.0 JS
ng-bootstrap · Aug 3, 2022 · cb4406d · cb4406d
1 parent a6f6803
commit cb4406d
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 9 deletions.
diff --git a/src/offcanvas/offcanvas-panel.ts b/src/offcanvas/offcanvas-panel.ts
@@ -68,11 +68,10 @@ export class NgbOffcanvasPanel implements OnInit,
     const {nativeElement} = this._elRef;
     const context: NgbTransitionOptions<any> = {animation: this.animation, runningTransition: 'stop'};
 
-    // TODO when we target Bootstrap 5.2+, the style.visibility handling can be removed, because Bootstrap has improved
-    // its CSS
     const offcanvasTransition$ = ngbRunTransition(this._zone, this._elRef.nativeElement, (element) => {
-      nativeElement.classList.remove('show');
-      return () => element.style.visibility = 'hidden';
+      nativeElement.classList.remove('showing');
+      nativeElement.classList.add('hiding');
+      return () => nativeElement.classList.remove('show', 'hiding');
     }, context);
 
     offcanvasTransition$.subscribe(() => {
@@ -89,15 +88,13 @@ export class NgbOffcanvasPanel implements OnInit,
   private _show() {
     const context: NgbTransitionOptions<any> = {animation: this.animation, runningTransition: 'continue'};
 
-    // TODO when we target Bootstrap 5.2+, the style.visibility handling can be removed, because Bootstrap has improved
-    // its CSS
     const offcanvasTransition$ =
         ngbRunTransition(this._zone, this._elRef.nativeElement, (element: HTMLElement, animation: boolean) => {
           if (animation) {
             reflow(element);
           }
-          element.classList.add('show');
-          element.style.visibility = 'visible';
+          element.classList.add('show', 'showing');
+          return () => element.classList.remove('showing');
         }, context);
 
     offcanvasTransition$.subscribe(() => {

diff --git a/src/offcanvas/offcanvas.spec.ts b/src/offcanvas/offcanvas.spec.ts
@@ -108,7 +108,6 @@ describe('ngb-offcanvas', () => {
         const offcanvasEl = document.querySelector('ngb-offcanvas-panel') as HTMLElement;
         expect(offcanvasEl).not.toHaveClass('fade');
         expect(offcanvasEl).toHaveClass('show');
-        expect(offcanvasEl.style.visibility).toBe('visible');
 
         offcanvasInstance.close('some result');
         fixture.detectChanges();
@@ -804,7 +803,14 @@ describe('ngb-offcanvas', () => {
 
                expect(window.getComputedStyle(offcanvasEl).transform).toBe('none');
                expect(offcanvasEl).toHaveClass('show');
+               expect(offcanvasEl).not.toHaveClass('showing');
+
                closeButton.click();
+               component.detectChanges();
+
+               expect(offcanvasEl).toHaveClass('show');
+               expect(offcanvasEl).not.toHaveClass('showing');
+               expect(offcanvasEl).toHaveClass('hiding');
              });
 
              offcanvasRef.hidden.subscribe(() => {
@@ -815,12 +821,49 @@ describe('ngb-offcanvas', () => {
 
              component.detectChanges();
              offcanvasEl = document.querySelector('ngb-offcanvas-panel');
+
              // if reducedMotion is true, modal would be opened and closed already at this point
              if (offcanvasEl) {
+               expect(offcanvasEl).toHaveClass('show');
+               expect(offcanvasEl).toHaveClass('showing');
                expect(window.getComputedStyle(offcanvasEl).transform).toMatch(/matrix.*/);
              }
            });
       });
+
+      it(`should start hiding even if the show animation isn't finished yet`, (done) => {
+        const component = TestBed.createComponent(TestAnimationComponent);
+        component.detectChanges();
+
+        const offcanvasRef = component.componentInstance.open();
+
+        // Ensure that everything works fine after a reflow
+        document.body.getBoundingClientRect();
+
+        let offcanvasEl: HTMLElement | null = null;
+
+        offcanvasRef.hidden.subscribe(() => {
+          offcanvasEl = document.querySelector('ngb-offcanvas-panel');
+          expect(offcanvasEl).toBeNull();
+          done();
+        });
+
+        component.detectChanges();
+        offcanvasEl = document.querySelector('ngb-offcanvas-panel');
+
+        expect(offcanvasEl).toHaveClass('show');
+        expect(offcanvasEl).toHaveClass('showing');
+
+        const closeButton = document.querySelector('button#close') as HTMLButtonElement;
+        closeButton.click();
+        component.detectChanges();
+
+
+
+        expect(offcanvasEl).toHaveClass('show');
+        expect(offcanvasEl).not.toHaveClass('showing');
+        expect(offcanvasEl).toHaveClass('hiding');
+      });
     });
   }
 });