EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3814 collapsible: Animate collapse header end animation

main
Pau Ferrer Ocaña 2022-03-07 13:19:21 +01:00
parent ddd82378aa
commit 1c9f34b469
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/core/directives/collapsible-header.ts
View File

@ -378,7 +378,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
if (progress > 0 && progress < 1) {
// Finish opening or closing the bar.
this.endAnimationTimeout = window.setTimeout(() => this.endAnimation(progress), 500);
this.endAnimationTimeout = window.setTimeout(() => this.endAnimation(progress, contentScroll.scrollTop), 500);
}
});
}
@ -387,8 +387,9 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
* End of animation when stop scrolling.
*
* @param progress Progress.
* @param scrollTop Current ScrollTop position.
*/
protected endAnimation(progress: number): void {
protected endAnimation(progress: number, scrollTop: number): void {
if(!this.page) {
return;
}
@ -397,6 +398,14 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
this.page.style.setProperty('--collapsible-header-progress', collapse ? '1' : '0');
this.page.classList.toggle('is-collapsed', collapse);
if (collapse && this.scrollingHeight && this.scrollingHeight > 0 && scrollTop < this.scrollingHeight) {
this.content?.scrollToPoint(null, this.scrollingHeight);
}
if (!collapse && this.scrollingHeight && this.scrollingHeight > 0 && scrollTop > 0) {
this.content?.scrollToPoint(null, 0);
}
}
}