From da81e06bc2108e93dcd0b0ed72f0c3039637851e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jovan=20Kruni=C4=87?= Date: Fri, 9 Oct 2026 12:16:26 +0200 Subject: [PATCH] fix: flickering in chrome when switching views Closes #253 --- .../app/modules/menu/navigation/tabs-transition.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/frontend/app/src/app/modules/menu/navigation/tabs-transition.ts b/frontend/app/src/app/modules/menu/navigation/tabs-transition.ts index 86495bce..8eb0271b 100644 --- a/frontend/app/src/app/modules/menu/navigation/tabs-transition.ts +++ b/frontend/app/src/app/modules/menu/navigation/tabs-transition.ts @@ -19,7 +19,10 @@ import type {AnimationOptions} from '@ionic/angular/common/providers/nav-control import {iosDuration, iosEasing, mdDuration, mdEasing} from 'src/app/animation/easings'; /** - * + * Creates the page transition used when switching between root pages via the + * tab bar or side menu: the old page fades out and reveals the new page beneath it. + * @param animationController Ionic animation controller used to build the animation + * @returns animation builder to pass to `NavController.setDirection` */ export function tabsTransition(animationController: AnimationController): AnimationBuilder { // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -29,11 +32,14 @@ export function tabsTransition(animationController: AnimationController): Animat .duration(options.duration ?? (options.mode === 'ios' ? iosDuration : mdDuration * 1.4)) .easing(options.mode === 'ios' ? iosEasing : mdEasing); - const exitZIndex = animationController.create().fromTo('opacity', '1', '0').addElement(options.leavingEl); + const exitZIndex = animationController + .create() + .fromTo('opacity', '1', '0') + .addElement(options.leavingEl) + .afterStyles({display: 'none'}); const contentEnter = animationController .create() - .fromTo('transform', 'scale(1.05)', 'scale(1)') - .fromTo('opacity', '0', '1') + .fromTo('opacity', '1', '1') .addElement(options.enteringEl); rootTransition.addAnimation([contentEnter, exitZIndex]);