javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ios page push/pop shared element transitions

Browse Source
This commit is contained in:
Nathan Walker
2023-03-08 21:08:16 -08:00
parent 653f58b1ad
commit 8b654a0b3b
15 changed files with 548 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/toolbox/src/pages/transitions.ts
View File

@@ -1,5 +1,4 @@
import { Observable, EventData, Page, ShowModalOptions, SharedTransition, ModalTransition, TransitionType, Screen } from '@nativescript/core';
// import { DetailTransition } from './transitions/detail';
import { Observable, EventData, Page, ShowModalOptions, SharedTransition, ModalTransition, PageTransition, Screen } from '@nativescript/core';
let page: Page;
export function navigatingTo(args: EventData) {
@@ -12,13 +11,22 @@ export function navigatingTo(args: EventData) {
// }
export class TransitionsModel extends Observable {
open() {
// const detailTransition = new DetailTransition(400, global.isIOS ? UIViewAnimationCurve.EaseInOut : null);
// detailTransition.page = page;
page.frame.navigate({
moduleName: `pages/transitions/transitions-detail`,
// transition: {
// instance: detailTransition,
// },
transition: {
instance: SharedTransition.configure({
page,
instance: new PageTransition(),
incomingViewStart: {
y: 200,
duration: 1000,
},
dismissViewEnd: {
y: 100,
duration: 500,
},
}),
},
});
}

2
apps/toolbox/src/pages/transitions/transitions-detail.xml
View File

@@ -8,7 +8,7 @@
<Image row="1" sharedTransitionTag="image-modal" src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" height="230" verticalAlignment="top" marginTop="10" />
<GridLayout row="2" rows="auto,auto,auto">
<Label text="Opened Modal" verticalAlignment="top" marginTop="20" class="text-center" fontSize="28" color="black" />
<Label text="Opened Navigated Page" verticalAlignment="top" marginTop="20" class="text-center" fontSize="28" color="black" />
<ContentView row="2" sharedTransitionTag="open-modal-box1" marginTop="20" width="200" height="200" borderRadius="100" backgroundColor="purple" />
<ContentView row="1" sharedTransitionTag="open-modal-box2" marginTop="20" width="75" height="75" borderRadius="37" backgroundColor="orange" />