diff --git a/packages/core/ui/transition/page-transition.android.ts b/packages/core/ui/transition/page-transition.android.ts index cb33dc208..2d4f064e4 100644 --- a/packages/core/ui/transition/page-transition.android.ts +++ b/packages/core/ui/transition/page-transition.android.ts @@ -77,7 +77,7 @@ function setTransitionName(view: ViewBase) { } export class PageTransition extends Transition { - constructor(duration?: number, curve?: any) { + constructor(duration?: number, curve?: any, private pageLoadedTimeout: number = 0) { // disable custom curves until we can fix the issue with the animation not completing if (curve) { console.warn('PageTransition does not support custom curves at the moment. The passed in curve will be ignored.'); @@ -178,12 +178,10 @@ export class PageTransition extends Transition { const state = SharedTransition.getState(this.id); const pageEnd = state.pageEnd; - const { sharedElements, presented, presenting } = SharedTransition.getSharedElements(fromPage, toPage); - const sharedElementTags = sharedElements.map((v) => v.sharedTransitionTag); - if (SharedTransition.DEBUG) { - console.log(` Page: ${state.activeType === SharedTransitionAnimationType.present ? 'Present' : 'Dismiss'}`); - console.log(`1. Found sharedTransitionTags to animate:`, sharedElementTags); - } + //we can't look for presented right now as the toPage might not be loaded + // and thus some views like ListView/Pager... might not have loaded their "children" + // presented will be handled in loaded event of toPage + const { presenting } = SharedTransition.getSharedElements(fromPage, toPage); // Note: we can enhance android more over time with element targeting across different screens // const pageStart = state.pageStart; @@ -215,16 +213,15 @@ export class PageTransition extends Transition { // independentView.opacity = 0; // } // } - - toPage.once('loaded', () => { - presented.filter((v) => sharedElementTags.includes(v.sharedTransitionTag)).forEach(setTransitionName); - newFragment.startPostponedEnterTransition(); - }); - - sharedElements.forEach((v) => { - setTransitionName(v); - fragmentTransaction.addSharedElement(v.nativeView, v.sharedTransitionTag); - }); + const onPageLoaded = () => { + // add a timeout so that Views like ListView / CollectionView can have their children instantiated + setTimeout(() => { + const { presented } = SharedTransition.getSharedElements(fromPage, toPage); + // const sharedElementTags = sharedElements.map((v) => v.sharedTransitionTag); + presented.forEach(setTransitionName); + newFragment.startPostponedEnterTransition(); + }, this.pageLoadedTimeout); + }; fragmentTransaction.setReorderingAllowed(true); @@ -252,6 +249,16 @@ export class PageTransition extends Transition { newFragment.postponeEnterTransition(); newFragment.setSharedElementEnterTransition(transitionSet); newFragment.setSharedElementReturnTransition(transitionSet); + + presenting.forEach((v) => { + setTransitionName(v); + fragmentTransaction.addSharedElement(v.nativeView, v.sharedTransitionTag); + }); + if (toPage.isLoaded) { + onPageLoaded(); + } else { + toPage.once('loaded', onPageLoaded); + } } } diff --git a/packages/core/ui/transition/page-transition.d.ts b/packages/core/ui/transition/page-transition.d.ts index dc19c5aec..3a6f2b32c 100644 --- a/packages/core/ui/transition/page-transition.d.ts +++ b/packages/core/ui/transition/page-transition.d.ts @@ -1,2 +1,4 @@ import { Transition } from '.'; -export declare class PageTransition extends Transition {} +export declare class PageTransition extends Transition { + constructor(duration?: number, nativeCurve?: any /* UIViewAnimationCurve | string | CubicBezierAnimationCurve | android.view.animation.Interpolator | android.view.animation.LinearInterpolator */, pageLoadedTimeout?: number); +}