Skip to content

Commit 2992a15

Browse files
farfromrefugfarfromrefug
committed
chore: demo using shared transitions
1 parent 9aca98f commit 2992a15

File tree

6 files changed

+111
-41
lines changed

6 files changed

+111
-41
lines changed

‎demo-snippets/vue/Details.vue‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
11
<script lang="ts">
2+
import Details2 from './Details2.vue';
3+
import { ImageSource, PageTransition, SharedTransition } from '@nativescript/core';
4+
export default {
5+
methods: {
6+
onNavigate(args) {
7+
this.$navigateTo(Details2, {
8+
transition: SharedTransition.custom(new PageTransition())
9+
});
10+
}
11+
}
12+
};
213
</script>
314

415
<template>
@@ -7,7 +18,15 @@
718
<Label text="Details" />
819
</ActionBar>
920
<GridLayout rows="auto, *">
10-
<Img height="200" row="1" width="200" src="https://images.unsplash.com/photo-1615870216519-2f9fa575fa5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8TWV4aWNhbiUyMGZvb2R8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" />
21+
<Img
22+
sharedTransitionTag="hero"
23+
height="200"
24+
row="1"
25+
width="200"
26+
src="https://images.unsplash.com/photo-1615870216519-2f9fa575fa5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8TWV4aWNhbiUyMGZvb2R8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60"
27+
@tap="onNavigate"
28+
verticalAlignment="bottom"
29+
/>
1130
</GridLayout>
1231
</Page>
1332
</template>

‎demo-snippets/vue/Details2.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script lang="ts">
2+
import Details from './Details.vue';
3+
import { ImageSource, PageTransition, SharedTransition } from '@nativescript/core';
4+
export default {
5+
methods: {
6+
onNavigate(args) {
7+
this.$navigateTo(Details, {
8+
transition: SharedTransition.custom(new PageTransition())
9+
});
10+
}
11+
}
12+
};
13+
</script>
14+
15+
<template>
16+
<Page>
17+
<ActionBar>
18+
<Label text="Details" />
19+
</ActionBar>
20+
<GridLayout rows="auto, *">
21+
<Img
22+
@tap="onNavigate"
23+
sharedTransitionTag="hero"
24+
height="200"
25+
row="1"
26+
width="200"
27+
src="https://images.unsplash.com/photo-1615870216519-2f9fa575fa5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8TWV4aWNhbiUyMGZvb2R8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60"
28+
/>
29+
</GridLayout>
30+
</Page>
31+
</template>

‎demo-snippets/vue/NavigationTest.vue‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,30 @@
55
</ActionBar>
66

77
<GridLayout rows="*, auto">
8-
<ListView :items="[{}]" row="0" rowHeight="200">
9-
<v-template>
10-
<Img sharedTransitionTag="hero" height="200" width="200" src="https://images.unsplash.com/photo-1615870216519-2f9fa575fa5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8TWV4aWNhbiUyMGZvb2R8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60" />
11-
</v-template>
12-
</ListView>
8+
<!-- <ListView :items="[{}]" row="0" rowHeight="200"> -->
9+
<!-- <v-template> -->
10+
<Img
11+
sharedTransitionTag="hero"
12+
height="200"
13+
width="200"
14+
src="https://images.unsplash.com/photo-1615870216519-2f9fa575fa5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8TWV4aWNhbiUyMGZvb2R8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60"
15+
/>
16+
<!-- </v-template> -->
17+
<!-- </ListView> -->
1318
<Button row="1" text="View Details" @tap="onNavigate" class="mt-4 px-4 py-2 bg-white border-2 border-blue-400 rounded-lg" horizontalAlignment="center" />
1419
</GridLayout>
1520
</Page>
1621
</template>
1722

1823
<script lang="ts">
19-
import { ImageSource } from '@nativescript/core';
24+
import { ImageSource, PageTransition, SharedTransition } from '@nativescript/core';
2025
import Details from './Details.vue';
2126
2227
export default {
2328
methods: {
2429
onNavigate(args) {
2530
this.$navigateTo(Details, {
26-
transition: {
27-
name: 'fade',
28-
duration: 2000,
29-
curve: 'ease'
30-
}
31+
transition: SharedTransition.custom(new PageTransition())
3132
});
3233
}
3334
}

‎demo-snippets/vue/install.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import ZoomImage from './ZoomImage.vue';
1111
import ColorFilter from './ColorFilter.vue';
1212
import NavigationTest from './NavigationTest.vue';
1313

14-
Trace.addCategories('NativescriptImage');
15-
Trace.enable();
14+
// Trace.addCategories('NativescriptImage');
15+
// Trace.enable();
1616

1717
export function installPlugin() {
1818
installMixins();
@@ -23,7 +23,7 @@ export function installPlugin() {
2323

2424
export const demos = [
2525
{ name: 'Simple', path: 'simple', component: Simple },
26-
{ name: 'NavigationTest', path: 'navigation', component: NavigationTest },
26+
{ name: 'hero', path: 'navigation', component: NavigationTest },
2727
{ name: 'ZoomImage', path: 'zoom', component: ZoomImage },
2828
{ name: 'ColorFilter', path: 'color-filter', component: ColorFilter }
2929
];

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,5 +73,8 @@
7373
"demo-svelte",
7474
"demo-react",
7575
"demo-snippets"
76-
]
76+
],
77+
"resolutions": {
78+
"@akylas/nativescript": "portal:/home/mguillon/dev/nativescript/NativeScript/dist/packages/core"
79+
}
7780
}

‎yarn.lock‎

Lines changed: 41 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,18 @@ __metadata:
55
version: 6
66
cacheKey: 8
77

8-
"@akylas/nativescript@npm:~8.4.1":
9-
version: 8.4.9
10-
resolution: "@akylas/nativescript@npm:8.4.9"
11-
dependencies:
12-
"@nativescript/hook": ~2.0.0
13-
acorn: ^8.7.0
14-
css-tree: ^1.1.2
15-
emoji-regex: ^10.2.1
16-
reduce-css-calc: ^2.1.7
17-
tslib: ^2.0.0
18-
checksum: 8fd350be996e6d9d57908d5c258142a71228fa7d688da5dab3849877467620e9f7a8807ea329bc08c3d6d0453299e67cd219f268857ee915b18d280d3215fefd
19-
languageName: node
20-
linkType: hard
21-
22-
"@akylas/nativescript@npm:~8.5.10":
23-
version: 8.5.10
24-
resolution: "@akylas/nativescript@npm:8.5.10"
8+
"@akylas/nativescript@portal:/home/mguillon/dev/nativescript/NativeScript/dist/packages/core::locator=root-workspace-0b6124%40workspace%3A.":
9+
version: 0.0.0-use.local
10+
resolution: "@akylas/nativescript@portal:/home/mguillon/dev/nativescript/NativeScript/dist/packages/core::locator=root-workspace-0b6124%40workspace%3A."
2511
dependencies:
2612
"@nativescript/hook": ~2.0.0
2713
acorn: ^8.7.0
2814
css-tree: ^1.1.2
2915
emoji-regex: ^10.2.1
3016
reduce-css-calc: ^2.1.7
3117
tslib: ^2.0.0
32-
checksum: f37e82340260d2f9d402d84cd1d0bb9f5c5d5906cafe9879fde702ff31bfb4826d97adea75ec63438a51f2325d28e46def2fd6c02d25e5998b3616071b9e1add
3318
languageName: node
34-
linkType: hard
19+
linkType: soft
3520

3621
"@ampproject/remapping@npm:2.2.0":
3722
version: 2.2.0
@@ -2975,7 +2960,7 @@ __metadata:
29752960

29762961
"@nativescript-community/plugin-seed-tools@file:tools::locator=root-workspace-0b6124%40workspace%3A.":
29772962
version: 1.0.0
2978-
resolution: "@nativescript-community/plugin-seed-tools@file:tools#tools::hash=c5b7b3&locator=root-workspace-0b6124%40workspace%3A."
2963+
resolution: "@nativescript-community/plugin-seed-tools@file:tools#tools::hash=a098ed&locator=root-workspace-0b6124%40workspace%3A."
29792964
dependencies:
29802965
"@angular/animations": ~15.2.6
29812966
"@angular/common": ~15.2.6
@@ -3005,6 +2990,7 @@ __metadata:
30052990
"@typescript-eslint/eslint-plugin": 5.57.1
30062991
"@typescript-eslint/parser": 5.57.1
30072992
"@vue/runtime-core": 3.2.45
2993+
"@vue/runtime-dom": 3.3.4
30082994
cpy-cli: ^3.1.1
30092995
detox: 20.6.0
30102996
eslint: 8.37.0
@@ -3040,7 +3026,7 @@ __metadata:
30403026
vue: ~2.6.14
30413027
yargs: ^17.6.2
30423028
zone.js: ~0.12.0
3043-
checksum: 189dde804cc709bd28538593e4df10a28bd064e460c08b14d784911adbd514e982004b929a569949da3b56200aca71e28780c908cd4b4795efa6e1e1bf7598c3
3029+
checksum: 97ec7b834e3d7aa71f0ea53dff73bd03a23f7263e21f52fddc145e700dc7636c2278dd8cb80a46b0cb60a016ba4359be480ac1ef7ee01879084eb16795a75d35
30443030
languageName: node
30453031
linkType: hard
30463032

@@ -3058,11 +3044,11 @@ __metadata:
30583044
version: 0.0.0-use.local
30593045
resolution: "@nativescript-community/ui-image-colorfilter@workspace:packages/image-colorfilter"
30603046
dependencies:
3061-
"@nativescript-community/ui-image": ^4.3.11
3047+
"@nativescript-community/ui-image": ^4.3.16
30623048
languageName: unknown
30633049
linkType: soft
30643050

3065-
"@nativescript-community/ui-image@*, @nativescript-community/ui-image@^4.3.11, @nativescript-community/ui-image@workspace:packages/image":
3051+
"@nativescript-community/ui-image@*, @nativescript-community/ui-image@^4.3.16, @nativescript-community/ui-image@workspace:packages/image":
30663052
version: 0.0.0-use.local
30673053
resolution: "@nativescript-community/ui-image@workspace:packages/image"
30683054
languageName: unknown
@@ -3072,7 +3058,7 @@ __metadata:
30723058
version: 0.0.0-use.local
30733059
resolution: "@nativescript-community/ui-zoomimage@workspace:packages/zoomimage"
30743060
dependencies:
3075-
"@nativescript-community/ui-image": ^4.3.11
3061+
"@nativescript-community/ui-image": ^4.3.16
30763062
languageName: unknown
30773063
linkType: soft
30783064

@@ -4705,6 +4691,15 @@ __metadata:
47054691
languageName: node
47064692
linkType: hard
47074693

4694+
"@vue/reactivity@npm:3.3.4":
4695+
version: 3.3.4
4696+
resolution: "@vue/reactivity@npm:3.3.4"
4697+
dependencies:
4698+
"@vue/shared": 3.3.4
4699+
checksum: 81c3d0c587d23656a57a7a31afb51357274f6512b51baffc67cda183b2361a7e65e646029c26a8bc28587f26b65bba808dcd93cdd3bacab48d2b99d11ad0ec97
4700+
languageName: node
4701+
linkType: hard
4702+
47084703
"@vue/runtime-core@npm:3.2.45":
47094704
version: 3.2.45
47104705
resolution: "@vue/runtime-core@npm:3.2.45"
@@ -4715,6 +4710,27 @@ __metadata:
47154710
languageName: node
47164711
linkType: hard
47174712

4713+
"@vue/runtime-core@npm:3.3.4":
4714+
version: 3.3.4
4715+
resolution: "@vue/runtime-core@npm:3.3.4"
4716+
dependencies:
4717+
"@vue/reactivity": 3.3.4
4718+
"@vue/shared": 3.3.4
4719+
checksum: d402da51269658cba5d857d65fbe322121160bcb1a6fcf03601d5183705e92505c6e90418f491a331ca3e27628f457a6ca7158b9add25f5b0cf5cf53664b8011
4720+
languageName: node
4721+
linkType: hard
4722+
4723+
"@vue/runtime-dom@npm:3.3.4":
4724+
version: 3.3.4
4725+
resolution: "@vue/runtime-dom@npm:3.3.4"
4726+
dependencies:
4727+
"@vue/runtime-core": 3.3.4
4728+
"@vue/shared": 3.3.4
4729+
csstype: ^3.1.1
4730+
checksum: dac9ada7f6128bcccc031fe5c25d00db94ffb7c011fcb70bada22fa4d889ff842eeb139ab9304bcc52cb5ae9030911a52cb3510b691bb190bbe5fab680b4411a
4731+
languageName: node
4732+
linkType: hard
4733+
47184734
"@vue/shared@npm:3.2.45":
47194735
version: 3.2.45
47204736
resolution: "@vue/shared@npm:3.2.45"
@@ -7356,7 +7372,7 @@ __metadata:
73567372
languageName: node
73577373
linkType: hard
73587374

7359-
"csstype@npm:^3.0.2":
7375+
"csstype@npm:^3.0.2, csstype@npm:^3.1.1":
73607376
version: 3.1.2
73617377
resolution: "csstype@npm:3.1.2"
73627378
checksum: e1a52e6c25c1314d6beef5168da704ab29c5186b877c07d822bd0806717d9a265e8493a2e35ca7e68d0f5d472d43fac1cdce70fd79fd0853dff81f3028d857b5

0 commit comments

Comments
 (0)