From 1c9f34b469eb7b119942ad9a8c5cbc7242bd585c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Mon, 7 Mar 2022 13:19:21 +0100 Subject: [PATCH] MOBILE-3814 collapsible: Animate collapse header end animation --- src/core/directives/collapsible-header.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts index 8dab80acb..9bb83a3ca 100644 --- a/src/core/directives/collapsible-header.ts +++ b/src/core/directives/collapsible-header.ts @@ -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); + } } }