@@ -34,7 +34,6 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
34
34
static ngAcceptInputType_horizontal : BooleanInput ;
35
35
static ngAcceptInputType_navbar : BooleanInput ;
36
36
37
- private _animate = true ;
38
37
/**
39
38
* @ignore
40
39
*/
@@ -45,6 +44,7 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
45
44
get animate ( ) : boolean {
46
45
return this . _animate ;
47
46
}
47
+ private _animate = true ;
48
48
49
49
/**
50
50
* Set horizontal collapsing to transition the width instead of height.
@@ -58,7 +58,6 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
58
58
}
59
59
private _horizontal : boolean = false ;
60
60
61
- private _visible = false ;
62
61
/**
63
62
* Toggle the visibility of collapsible element.
64
63
*/
@@ -69,8 +68,8 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
69
68
get visible ( ) : boolean {
70
69
return this . _visible ;
71
70
}
71
+ private _visible = false ;
72
72
73
- private _navbar = false ;
74
73
/**
75
74
* Add `navbar` prop for grouping and hiding navbar contents by a parent breakpoint.
76
75
*/
@@ -81,6 +80,7 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
81
80
get navbar ( ) {
82
81
return this . _navbar ;
83
82
}
83
+ private _navbar = false ;
84
84
85
85
/**
86
86
* @ignore
@@ -98,7 +98,7 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
98
98
99
99
private player ! : AnimationPlayer ;
100
100
private readonly host : HTMLElement ;
101
- private scrollHeight ! : number ;
101
+ // private scrollHeight!: number;
102
102
private scrollWidth ! : number ;
103
103
private collapsing : boolean = false ;
104
104
@@ -108,7 +108,7 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
108
108
private animationBuilder : AnimationBuilder
109
109
) {
110
110
this . host = this . hostElement . nativeElement ;
111
- this . setDisplay ( false ) ;
111
+ this . renderer . setStyle ( this . host , 'display' , 'none' ) ;
112
112
}
113
113
114
114
@HostBinding ( 'class' )
@@ -118,7 +118,7 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
118
118
show : this . visible ,
119
119
'collapse-horizontal' : this . horizontal ,
120
120
collapsing : this . collapsing
121
- // collapse: !this.collapsing
121
+ // collapse: !this.collapsing && !this.visible
122
122
} ;
123
123
}
124
124
@@ -147,9 +147,7 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
147
147
}
148
148
149
149
toggle ( visible = this . visible ) : void {
150
- this . setDisplay ( true ) ;
151
150
this . createPlayer ( visible ) ;
152
- this . visible = visible ;
153
151
this . player ?. play ( ) ;
154
152
}
155
153
@@ -162,20 +160,23 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
162
160
this . destroyPlayer ( ) ;
163
161
}
164
162
165
- let animationFactory ;
163
+ if ( visible ) {
164
+ this . renderer . removeStyle ( this . host , 'display' ) ;
165
+ }
166
166
167
167
const duration = this . animate ? this . duration : '0ms' ;
168
168
169
169
const expand = this . horizontal ? expandHorizontalAnimation : expandAnimation ;
170
170
const collapse = this . horizontal ? collapseHorizontalAnimation : collapseAnimation ;
171
171
172
- animationFactory = this . animationBuilder . build (
172
+ const animationFactory = this . animationBuilder . build (
173
173
useAnimation ( visible ? expand : collapse , { params : { time : duration , easing : this . transition } } )
174
174
) ;
175
175
176
176
this . player = animationFactory . create ( this . host ) ;
177
177
this . player . onStart ( ( ) => {
178
178
this . setMaxSize ( ) ;
179
+ this . visible = visible ;
179
180
this . collapsing = true ;
180
181
this . collapseChange . emit ( visible ? 'opening' : 'collapsing' ) ;
181
182
} ) ;
@@ -196,8 +197,4 @@ export class CollapseDirective implements OnChanges, OnDestroy, DoCheck, AfterVi
196
197
}
197
198
} ) ;
198
199
}
199
-
200
- setDisplay ( display : boolean ) {
201
- display ? this . renderer . removeStyle ( this . host , 'display' ) : this . renderer . setStyle ( this . host , 'display' , 'none' ) ;
202
- }
203
200
}
0 commit comments