bug: iOS back transitions between <ion-tabs> pages not animating

Bug Report

Ionic version:

[x] 4.3.1

Current behavior:

Demo app confirgured with { mode: ‘ios’ } and has 2 <ion-tabs> pages. Navigating forward from Tabs A to Tabs B pages animates as expected. Navigating back from Tabs B to Tabs A does not animate. Removing the { mode: ‘ios’ } config line shows Android style animations working correctly forwards and back.

Expected behavior:

Navigating back from Tabs B to Tabs A page should animate.

Steps to reproduce:

• Create a new app
• Change app.module to run in iOS mode
• Create 2 <ion-tabs> pages, and navigate forward and back between each one

Related code:

Basic demo is available at: https://github.com/benmarsh/ionic-multi-tabs-test

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.3.1
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

System:

   NodeJS : v11.12.0 (/usr/local/Cellar/node/11.12.0/bin/node)
   npm    : 6.7.0
   OS     : macOS Mojave

[tobiasbambullis]

@gggiiia: i found a solution for ionic5.

include this in app.module.ts:

IonicModule.forRoot({ 
  navAnimation: fixAnimation
}),

and this in a new file:

import { Animation, NavOptions, createAnimation } from '@ionic/core';

const DURATION = 500;
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';

export function fixAnimation(_: HTMLElement, navEl: TransitionOptions): Animation {
	
	let transitionElement: any = navEl;

    const enteringEl = transitionElement.enteringEl;
    const leavingEl = transitionElement.leavingEl;

	const backDirection = (transitionElement.direction === 'back');
	const rootTransition: Animation = createAnimation('')
	if(!backDirection) {

		const squareA: Animation = createAnimation('')
			.addElement(enteringEl)
			.duration(transitionElement.duration || DURATION)
			.easing(EASING)
			.beforeStyles({ 'opacity': 1 })
            .fromTo('transform', 'translateX(99.5%)', 'translateX(0%)');

		const squareB: Animation = createAnimation('')
			.addElement(leavingEl)
			.duration(transitionElement.duration || DURATION)
			.easing(EASING)
            .fromTo('transform', 'translateX(0%)', 'translateX(-20%)')
			.fromTo('opacity', '1', '0.8')

		rootTransition.addAnimation([squareA, squareB]);
	}
	else {

		const squareA: Animation = createAnimation('')
			.addElement(leavingEl)
			.duration(transitionElement.duration || DURATION)
			.easing(transitionElement.easing || EASING)
            .fromTo('transform', 'translateX(0%)', 'translateX(99.5%)');


		const squareB: Animation = createAnimation('')
			.addElement(enteringEl)
			.duration(transitionElement.duration || DURATION)
			.easing(transitionElement.easing || EASING)
			.fromTo('opacity', '0.8', '1')
            .fromTo('transform', 'translateX(-20%)', 'translateX(0%)');

		rootTransition.addAnimation([squareA, squareB]);

	}

    return rootTransition;

};

export interface TransitionOptions extends NavOptions {
  progressCallback?: ((ani: Animation | undefined) => void);
  baseEl: any;
  enteringEl: HTMLElement;
  leavingEl: HTMLElement | undefined;
}

export const getIonPageElement = (element: HTMLElement) => {
  if (element.classList.contains('ion-page')) {
    return element;
  }

  const ionPage = element.querySelector(':scope > .ion-page, :scope > ion-nav, :scope > ion-tabs');
  if (ionPage) {
    return ionPage;
  }
  // idk, return the original element so at least something animates and we don't have a null pointer
  return element;
};

[benmarsh]

@lincolnthree Check out https://gist.github.com/benmarsh/6401a4c58a4b48e305c217c6552c182e for the simplified version of the transition. It’s based on the included Ionic transition and I’ve left in the commented out code so you can see what has been removed. I’ve not had any animation problems with using this reduced down version. Add { navAnimation: simpleTransitionAnimation } to the app config to override the default (https://ionicframework.com/docs/utilities/config)