Skip to content

Implement fade-through transitions for android navigation animation #30388

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Implement fade-through transitions for android navigation animation #30388

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f8dbb2
feat: Implement android shared x axis transition for navigation anima…
EKashpersky May 2, 2025
a0dd6dc
chore: Replace bottom-sheet transition for android navigation with fa…
EKashpersky May 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 47 additions & 46 deletions core/src/utils/transition/md.transition.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,59 @@
import type { Animation } from '../../interface';
import { createAnimation } from '../animation/animation';
import type { TransitionOptions } from '../transition';
import { getIonPageElement } from '../transition';

export const mdTransitionAnimation = (_: HTMLElement, opts: TransitionOptions): Animation => {
const OFF_BOTTOM = '40px';
const CENTER = '0px';

const backDirection = opts.direction === 'back';
const enteringEl = opts.enteringEl;
const leavingEl = opts.leavingEl;

const ionPageElement = getIonPageElement(enteringEl);
const enteringToolbarEle = ionPageElement.querySelector('ion-toolbar');
const rootTransition = createAnimation();

rootTransition.addElement(ionPageElement).fill('both').beforeRemoveClass('ion-page-invisible');
const dpToPx = (n: number) => window.devicePixelRatio * n;

// animate the component itself
if (backDirection) {
rootTransition.duration((opts.duration ?? 0) || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
export const mdTransitionAnimation = (_: HTMLElement, opts: TransitionOptions): Animation => {
const enteringEl = opts.enteringEl;
const leavingEl = opts.leavingEl;

// choose from/to transforms depending on navigation direction
let enterFrom: string, enterTo: string, leaveFrom: string, leaveTo: string;
if (opts.direction === 'forward') {
enterFrom = `translateX(${dpToPx(30)}px)`;
enterTo = 'translateX(0%)';
leaveFrom = 'translateX(0%)';
leaveTo = `translateX(-${dpToPx(30)}px)`;
} else {
rootTransition
.duration((opts.duration ?? 0) || 280)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.fromTo('transform', `translateY(${OFF_BOTTOM})`, `translateY(${CENTER})`)
.fromTo('opacity', 0.01, 1);
}

// Animate toolbar if it's there
if (enteringToolbarEle) {
const enteringToolBar = createAnimation();
enteringToolBar.addElement(enteringToolbarEle);
rootTransition.addAnimation(enteringToolBar);
enterFrom = `translateX(-${dpToPx(30)}px)`;
enterTo = 'translateX(0%)';
leaveFrom = 'translateX(0%)';
leaveTo = `translateX(${dpToPx(30)}px)`;
}

// setup leaving view
if (leavingEl && backDirection) {
// leaving content
rootTransition.duration((opts.duration ?? 0) || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');

const leavingPage = createAnimation();
leavingPage
.addElement(getIonPageElement(leavingEl))
.onFinish((currentStep) => {
if (currentStep === 1 && leavingPage.elements.length > 0) {
leavingPage.elements[0].style.setProperty('display', 'none');
}
})
.fromTo('transform', `translateY(${CENTER})`, `translateY(${OFF_BOTTOM})`)
.fromTo('opacity', 1, 0);

rootTransition.addAnimation(leavingPage);
const rootAninmation = createAnimation();

const enterFade = createAnimation()
.addElement(enteringEl)
.delay(100)
.duration(200)
.easing('cubic-bezier(0.0, 0.0, 0.2, 1.0)')
.fromTo('opacity', '0', '1');
const enterSlide = createAnimation()
.addElement(enteringEl)
.duration(300)
.easing('cubic-bezier(0.4, 0.0, 0.2, 1.0)')
.fromTo('transform', enterFrom, enterTo);

rootAninmation.addAnimation([ enterFade, enterSlide ]);

if (leavingEl) {
const exitFade = createAnimation()
.addElement(leavingEl)
.duration(100)
.easing('cubic-bezier(0.4, 0.0, 1.0, 1.0)')
.fromTo('opacity', '1', '0');
const exitSlide = createAnimation()
.duration(300)
.addElement(leavingEl)
.easing('cubic-bezier(0.4, 0.0, 0.2, 1.0)')
.fromTo('transform', leaveFrom, leaveTo);

rootAninmation.addAnimation([ exitFade, exitSlide ]);
}

return rootTransition;
};
return rootAninmation;
}