fix(collapse): fix collapse animation (child height) (#5316)

* fix(collapse): fix collapse animation (child height) * fix(tests): add fix for cy tests and fix for stackblitz example in IE
valor-software · Jul 9, 2019 · f550605 · f550605
1 parent c102ff0
commit f550605
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 20 deletions.
diff --git a/cypress/support/accordion.po.ts b/cypress/support/accordion.po.ts
@@ -40,7 +40,7 @@ export class AccordionPo extends BaseComponent {
 
   isItemContentVisible(baseSelector: string, itemIndex: number, visible: boolean) {
     cy.get(`${baseSelector} .panel-body`)
-      .eq(itemIndex)
+      .eq(itemIndex, {timeout: 10000})
       .should(visible ? 'be.visible' : 'not.be.visible');
   }
 

diff --git a/demo/src/app/components/+accordion/docs/usage.md b/demo/src/app/components/+accordion/docs/usage.md
@@ -13,3 +13,5 @@ import { AccordionModule } from 'ngx-bootstrap';
   ]
 })
 export class AppModule(){}
+
+Also should be added web-animations-js polyfill for IE browser (Edge)
diff --git a/demo/src/app/components/+collapse/docs/usage.md b/demo/src/app/components/+collapse/docs/usage.md
@@ -13,3 +13,5 @@ import { CollapseModule } from 'ngx-bootstrap';
   ]
 })
 export class AppModule(){}
+
+Also should be added web-animations-js polyfill for IE browser (Edge)
diff --git a/demo/src/app/docs/demo-section-components/demo-examples-section/examples.component.ts b/demo/src/app/docs/demo-section-components/demo-examples-section/examples.component.ts
@@ -95,6 +95,7 @@ export class ExamplesComponent {
       },
       dependencies: {
         '@angular/animations': 'latest',
+        'web-animations-js': 'latest',
         'ngx-bootstrap': 'next'
       },
       title: 'stackblitz demo',

diff --git a/demo/src/app/docs/demo-section-components/demo-examples-section/stackblitz/polyfills.ts b/demo/src/app/docs/demo-section-components/demo-examples-section/stackblitz/polyfills.ts
@@ -32,6 +32,7 @@ export const polyfills = `/**
 // import 'core-js/es6/regexp';
 // import 'core-js/es6/map';
 // import 'core-js/es6/set';
+import 'web-animations-js';
 
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run \`npm install --save classlist.js\`.

diff --git a/demo/src/polyfills.ts b/demo/src/polyfills.ts
@@ -19,5 +19,6 @@ import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
 import 'zone.js/dist/zone';
 import 'classlist-polyfill';
+import 'web-animations-js';
 // import 'intl';
 // import 'intl/locale-data/jsonp/en';
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "flow.github-release": "conventional-github-releaser -p angular",
     "build": "run-s build.modules build:schematics build.sass dist-to-modules compiler-cli:fix",
     "compiler-cli:fix": "scripts/ivy/compiler-cli-fix.sh",
-    "dist-to-modules": "cp -r -T ./dist ./node_modules/ngx-bootstrap",
+    "dist-to-modules": "cp -R ./dist/. ./node_modules/ngx-bootstrap",
     "build.watch": "node scripts/build-modules --watch",
     "build:schematics": "node scripts/schematics/build",
     "build.modules": "node scripts/build-modules",
@@ -130,6 +130,7 @@
     "bootstrap": "4.2.1",
     "chai": "4.1.2",
     "classlist-polyfill": "1.2.0",
+    "web-animations-js": "2.3.2",
     "codecov": "3.1.0",
     "codelyzer": "5.0.1",
     "compression": "1.7.2",

diff --git a/src/collapse/collapse.directive.ts b/src/collapse/collapse.directive.ts
@@ -4,7 +4,6 @@ import {
   AnimationPlayer
 } from '@angular/animations';
 
-// todo: add animations when https://github.com/angular/angular/issues/9947 solved
 import {
   AfterViewChecked,
   Directive,
@@ -73,8 +72,10 @@ export class CollapseDirective implements AfterViewChecked {
   /** A flag indicating visibility of content (shown or hidden) */
   @Input()
   set collapse(value: boolean) {
-    this.isExpanded = value;
-    this.toggle();
+    if (!this._player || this._isAnimationDone) {
+      this.isExpanded = value;
+      this.toggle();
+    }
   }
 
   get collapse(): boolean {
@@ -84,6 +85,7 @@ export class CollapseDirective implements AfterViewChecked {
   private _display = 'block';
   private _factoryCollapseAnimation: AnimationFactory;
   private _factoryExpandAnimation: AnimationFactory;
+  private _isAnimationDone: boolean;
   private _player: AnimationPlayer;
   private _stylesLoaded = false;
 
@@ -99,8 +101,15 @@ export class CollapseDirective implements AfterViewChecked {
     this._factoryExpandAnimation = _builder.build(expandAnimation);
   }
 
-  ngAfterViewChecked() {
+  ngAfterViewChecked(): void {
     this._stylesLoaded = true;
+
+    if (!this._player || !this._isAnimationDone) {
+      return;
+    }
+
+    this._player.reset();
+    this._renderer.setStyle(this._el.nativeElement, 'height', '*');
   }
 
   /** allows to manually toggle content visibility */
@@ -121,7 +130,10 @@ export class CollapseDirective implements AfterViewChecked {
 
     this.collapses.emit(this);
 
+    this._isAnimationDone = false;
+
     this.animationRun(this.isAnimated, this._COLLAPSE_ACTION_NAME)(() => {
+      this._isAnimationDone = true;
       this.collapsed.emit(this);
       this._renderer.setStyle(this._el.nativeElement, 'display', 'none');
     });
@@ -137,7 +149,10 @@ export class CollapseDirective implements AfterViewChecked {
 
     this.expands.emit(this);
 
+    this._isAnimationDone = false;
+
     this.animationRun(this.isAnimated, this._EXPAND_ACTION_NAME)(() => {
+      this._isAnimationDone = true;
       this.expanded.emit(this);
     });
   }