diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/collapse.animations.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/collapse.animations.ts index e2125c4ea6..945ca6ab08 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/animations/collapse.animations.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/collapse.animations.ts @@ -1,4 +1,12 @@ -import { animate, animation, trigger, state, style, transition, useAnimation } from '@angular/animations'; +import { + animate, + animation, + trigger, + state, + style, + transition, + useAnimation, +} from '@angular/animations'; export const collapseY = animation( [ @@ -9,7 +17,10 @@ export const collapseY = animation( ); export const collapseYWithMargin = animation( - [style({ 'margin-top': '0' }), animate('{{ time }} {{ easing }}', style({ 'margin-top': '-100%' }))], + [ + style({ 'margin-top': '0' }), + animate('{{ time }} {{ easing }}', style({ 'margin-left': '-100%' })), + ], { params: { time: '500ms', easing: 'ease' }, }, @@ -32,7 +43,10 @@ export const expandY = animation( ); export const expandYWithMargin = animation( - [style({ 'margin-top': '-100%' }), animate('{{ time }} {{ easing }}', style({ 'margin-top': '0' }))], + [ + style({ 'margin-top': '-100%' }), + animate('{{ time }} {{ easing }}', style({ 'margin-top': '0' })), + ], { params: { time: '500ms', easing: 'ease' }, }, @@ -63,11 +77,14 @@ export const collapseWithMargin = trigger('collapseWithMargin', [ ]); export const collapseLinearWithMargin = trigger('collapseLinearWithMargin', [ - state('collapsed', style({ 'margin-top': '-100%' })), + state('collapsed', style({ 'margin-top': '-100vh' })), state('expanded', style({ 'margin-top': '0' })), transition( 'expanded => collapsed', useAnimation(collapseYWithMargin, { params: { time: '200ms', easing: 'linear' } }), ), - transition('collapsed => expanded', useAnimation(expandYWithMargin, { params: { time: '250ms', easing: 'linear' } })), + transition( + 'collapsed => expanded', + useAnimation(expandYWithMargin, { params: { time: '250ms', easing: 'linear' } }), + ), ]);