Skip to content

Commit 2268710

Browse files
committed
fix(collapse): early display issue, refactor
1 parent 6601cc6 commit 2268710

File tree

1 file changed

+11
-14
lines changed

1 file changed

+11
-14
lines changed

projects/coreui-angular/src/lib/collapse/collapse.directive.ts

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
3434
static ngAcceptInputType_horizontal: BooleanInput;
3535
static ngAcceptInputType_navbar: BooleanInput;
3636

37-
private _animate = true;
3837
/**
3938
* @ignore
4039
*/
@@ -45,6 +44,7 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
4544
get animate(): boolean {
4645
return this._animate;
4746
}
47+
private _animate = true;
4848

4949
/**
5050
* Set horizontal collapsing to transition the width instead of height.
@@ -58,7 +58,6 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
5858
}
5959
private _horizontal: boolean = false;
6060

61-
private _visible = false;
6261
/**
6362
* Toggle the visibility of collapsible element.
6463
*/
@@ -69,8 +68,8 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
6968
get visible(): boolean {
7069
return this._visible;
7170
}
71+
private _visible = false;
7272

73-
private _navbar = false;
7473
/**
7574
* Add `navbar` prop for grouping and hiding navbar contents by a parent breakpoint.
7675
*/
@@ -81,6 +80,7 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
8180
get navbar() {
8281
return this._navbar;
8382
}
83+
private _navbar = false;
8484

8585
/**
8686
* @ignore
@@ -98,7 +98,7 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
9898

9999
private player!: AnimationPlayer;
100100
private readonly host: HTMLElement;
101-
private scrollHeight!: number;
101+
// private scrollHeight!: number;
102102
private scrollWidth!: number;
103103
private collapsing: boolean = false;
104104

@@ -108,7 +108,7 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
108108
private animationBuilder: AnimationBuilder
109109
) {
110110
this.host = this.hostElement.nativeElement;
111-
this.setDisplay(false);
111+
this.renderer.setStyle(this.host, 'display', 'none');
112112
}
113113

114114
@HostBinding('class')
@@ -118,7 +118,7 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
118118
show: this.visible,
119119
'collapse-horizontal': this.horizontal,
120120
collapsing: this.collapsing
121-
// collapse: !this.collapsing
121+
// collapse: !this.collapsing && !this.visible
122122
};
123123
}
124124

@@ -147,9 +147,7 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
147147
}
148148

149149
toggle(visible = this.visible): void {
150-
this.setDisplay(true);
151150
this.createPlayer(visible);
152-
this.visible = visible;
153151
this.player?.play();
154152
}
155153

@@ -162,20 +160,23 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
162160
this.destroyPlayer();
163161
}
164162

165-
let animationFactory;
163+
if (visible) {
164+
this.renderer.removeStyle(this.host, 'display');
165+
}
166166

167167
const duration = this.animate ? this.duration : '0ms';
168168

169169
const expand = this.horizontal ? expandHorizontalAnimation : expandAnimation;
170170
const collapse = this.horizontal ? collapseHorizontalAnimation : collapseAnimation;
171171

172-
animationFactory = this.animationBuilder.build(
172+
const animationFactory = this.animationBuilder.build(
173173
useAnimation(visible ? expand : collapse, { params: { time: duration, easing: this.transition } })
174174
);
175175

176176
this.player = animationFactory.create(this.host);
177177
this.player.onStart(() => {
178178
this.setMaxSize();
179+
this.visible = visible;
179180
this.collapsing = true;
180181
this.collapseChange.emit(visible ? 'opening' : 'collapsing');
181182
});
@@ -196,8 +197,4 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
196197
}
197198
});
198199
}
199-
200-
setDisplay(display: boolean) {
201-
display ? this.renderer.removeStyle(this.host, 'display') : this.renderer.setStyle(this.host, 'display', 'none');
202-
}
203200
}

0 commit comments

Comments
 (0)