Skip to content

Commit 5ccb863

Browse files
cwandevcwandev
committed
refactor: Remove transition animations (#103)
1 parent d79d4eb commit 5ccb863

File tree

16 files changed

+127
-220
lines changed

16 files changed

+127
-220
lines changed

‎src/App.vue‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import { storeToRefs } from 'pinia'
33
import useAppStore from '@/stores/modules/app'
44
import useRouteCache from '@/stores/modules/routeCache'
5-
import useRouteTransitionNameStore from '@/stores/modules/routeTransitionName'
65
import useAutoThemeSwitcher from '@/hooks/useAutoThemeSwitcher'
76
87
useHead({
@@ -29,8 +28,6 @@ useHead({
2928
const appStore = useAppStore()
3029
const { mode } = storeToRefs(appStore)
3130
32-
const routeTransitionNameStore = useRouteTransitionNameStore()
33-
const { routeTransitionName } = storeToRefs(routeTransitionNameStore)
3431
const { initializeThemeSwitcher } = useAutoThemeSwitcher(appStore)
3532
3633
const keepAliveRouteNames = computed(() => {
@@ -46,11 +43,11 @@ onMounted(() => {
4643
<VanConfigProvider :theme="mode">
4744
<NavBar />
4845
<router-view v-slot="{ Component, route }">
49-
<transition :name="routeTransitionName">
46+
<Container>
5047
<keep-alive :include="keepAliveRouteNames">
5148
<component :is="Component" :key="route.name" />
5249
</keep-alive>
53-
</transition>
50+
</Container>
5451
</router-view>
5552
<TabBar />
5653
</VanConfigProvider>

‎src/components/Container.vue‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,5 @@
1-
<script setup lang="ts">
2-
defineProps({
3-
paddingX: {
4-
type: Number,
5-
default: 16,
6-
},
7-
})
8-
</script>
9-
101
<template>
11-
<main
12-
class="absolute left-0 h-full w-full overflow-y-auto pt-46"
13-
:style="`padding-left: ${paddingX}px; padding-right: ${paddingX}px`"
14-
>
2+
<section class="p-16">
153
<slot />
16-
</main>
4+
</section>
175
</template>

‎src/components/NavBar.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,12 @@ const title = computed(() => {
2121

2222
<template>
2323
<VanNavBar
24-
v-show="title"
24+
v-if="title"
2525
:title="title"
2626
:fixed="true"
27-
clickable left-arrow
27+
clickable
28+
left-arrow
29+
placeholder
2830
@click-left="onBack"
2931
/>
3032
</template>

‎src/components/TabBar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@ const { t } = useI18n()
33
const active = ref(0)
44
const route = useRoute()
55
6-
const display = computed(() => {
6+
const show = computed(() => {
77
if (route.meta.level && route.meta.level !== 2)
88
return true
99
return false
1010
})
1111
</script>
1212

1313
<template>
14-
<van-tabbar v-show="display" v-model="active" route>
14+
<van-tabbar v-if="show" v-model="active" route placeholder>
1515
<van-tabbar-item replace to="/">
1616
{{ t('layouts.home') }}
1717
<template #icon>

‎src/pages/[...all].vue‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,20 @@ function onBack() {
1010
</script>
1111

1212
<template>
13-
<Container>
14-
<div text="center gray-300 dark:gray-200 18">
15-
<van-icon name="warn-o" size="3em" />
16-
<div> Not found </div>
13+
<div text="center gray-300 dark:gray-200 18">
14+
<van-icon name="warn-o" size="3em" />
15+
<div> Not found </div>
1716

18-
<div class="mt-10">
19-
<button van-haptics-feedback btn m="3 t8" @click="onBack">
20-
Back
21-
</button>
22-
</div>
17+
<div class="mt-10">
18+
<button van-haptics-feedback btn m="3 t8" @click="onBack">
19+
Back
20+
</button>
2321
</div>
24-
</Container>
22+
</div>
2523
</template>
2624

2725
<route lang="json">
2826
{
29-
"name": "404",
30-
"meta": {
31-
"level": 2
32-
}
27+
"name": "404"
3328
}
3429
</route>

‎src/pages/charts/index.vue‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -60,18 +60,15 @@ const refScoreOption = ref(scoreOption)
6060
</script>
6161

6262
<template>
63-
<Container>
64-
<Chart :option="refBarOption" :style="{ height: '330px' }" />
65-
<Chart :option="refLineOption" :style="{ height: '330px' }" />
66-
<Chart :option="refScoreOption" :style="{ height: '330px' }" />
67-
</Container>
63+
<Chart :option="refBarOption" :style="{ height: '330px' }" />
64+
<Chart :option="refLineOption" :style="{ height: '330px' }" />
65+
<Chart :option="refScoreOption" :style="{ height: '330px' }" />
6866
</template>
6967

7068
<route lang="json">
7169
{
7270
"name": "charts",
7371
"meta": {
74-
"level": 2,
7572
"title": "📊 Echarts 演示",
7673
"i18n": "home.echartsDemo"
7774
}

‎src/pages/counter/index.vue‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,31 +11,28 @@ function add() {
1111
</script>
1212

1313
<template>
14-
<Container>
15-
<h1 class="text-6xl color-pink font-semibold">
16-
Hello, Pinia!
17-
</h1>
14+
<h1 class="text-6xl color-pink font-semibold">
15+
Hello, Pinia!
16+
</h1>
1817

19-
<p class="mt-4 text-gray-700 dark:text-white">
20-
This is a simple example of persisting Pinia state.
21-
To verify its effectiveness, you can refresh the interface and observe it.
22-
</p>
18+
<p class="mt-4 text-gray-700 dark:text-white">
19+
This is a simple example of persisting Pinia state.
20+
To verify its effectiveness, you can refresh the interface and observe it.
21+
</p>
2322

24-
<p class="mt-4">
25-
number：<strong class="text-green-500"> {{ counter }} </strong>
26-
</p>
23+
<p class="mt-4">
24+
number：<strong class="text-green-500"> {{ counter }} </strong>
25+
</p>
2726

28-
<button class="btn" @click="add">
29-
Add
30-
</button>
31-
</container>
27+
<button class="btn" @click="add">
28+
Add
29+
</button>
3230
</template>
3331

3432
<route lang="json">
3533
{
3634
"name": "counter",
3735
"meta": {
38-
"level": 2,
3936
"title": "🍍 持久化 Pinia 状态",
4037
"i18n": "home.persistPiniaState"
4138
}

‎src/pages/index.vue‎

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -41,42 +41,39 @@ const menuItems = computed(() => ([
4141
</script>
4242

4343
<template>
44-
<Container :padding-x="0">
45-
<VanCellGroup inset>
46-
<VanCell center :title="t('home.darkMode')">
47-
<template #right-icon>
48-
<VanSwitch v-model="checked" size="20px" aria-label="on/off Dark Mode" @click="toggle()" />
49-
</template>
50-
</VanCell>
44+
<VanCellGroup title="基本设置">
45+
<VanCell center :title="t('home.darkMode')">
46+
<template #right-icon>
47+
<VanSwitch v-model="checked" size="20px" aria-label="on/off Dark Mode" @click="toggle()" />
48+
</template>
49+
</VanCell>
5150

52-
<VanCell
53-
is-link
54-
:title="t('home.language')"
55-
:value="language"
56-
@click="showLanguagePicker = true"
57-
/>
51+
<VanCell
52+
is-link
53+
:title="t('home.language')"
54+
:value="language"
55+
@click="showLanguagePicker = true"
56+
/>
57+
</VanCellGroup>
5858

59-
<van-popup v-model:show="showLanguagePicker" position="bottom">
60-
<van-picker
61-
v-model="languageValues"
62-
:columns="languageColumns"
63-
@confirm="onLanguageConfirm"
64-
@cancel="showLanguagePicker = false"
65-
/>
66-
</van-popup>
59+
<VanCellGroup title="示例组件">
60+
<template v-for="item in menuItems" :key="item.route">
61+
<VanCell :title="item.title" :to="item.route" is-link />
62+
</template>
63+
</VanCellGroup>
6764

68-
<template v-for="item in menuItems" :key="item.route">
69-
<VanCell :title="item.title" :to="item.route" is-link />
70-
</template>
71-
</VanCellGroup>
72-
</Container>
65+
<van-popup v-model:show="showLanguagePicker" position="bottom">
66+
<van-picker
67+
v-model="languageValues"
68+
:columns="languageColumns"
69+
@confirm="onLanguageConfirm"
70+
@cancel="showLanguagePicker = false"
71+
/>
72+
</van-popup>
7373
</template>
7474

7575
<route lang="json">
7676
{
77-
"name": "home",
78-
"meta": {
79-
"level": 1
80-
}
77+
"name": "home"
8178
}
8279
</route>

‎src/pages/keepalive/index.vue‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,14 @@ const value = ref(1)
77
</script>
88

99
<template>
10-
<Container>
11-
<p>{{ $t('keepAlive.label') }}</p>
12-
<van-stepper v-model="value" />
13-
</Container>
10+
<p>{{ $t('keepAlive.label') }}</p>
11+
<van-stepper v-model="value" />
1412
</template>
1513

1614
<route lang="json">
1715
{
1816
"name": "KeepAlive",
1917
"meta": {
20-
"level": 2,
2118
"title": "🧡 KeepAlive",
2219
"i18n": "home.keepAlive",
2320
"keepAlive": true

‎src/pages/login/index.vue‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -41,31 +41,28 @@ async function asyncLogin(values: any) {
4141
</script>
4242

4343
<template>
44-
<Container :padding-x="0">
45-
<div class="m-x-a w-7xl text-center">
46-
<div class="mb-32 mt-64">
47-
<van-image :src="defaultAvatar" round class="h-64 w-64" />
48-
</div>
49-
<van-form :model="postData" :rules="rules" @submit="asyncLogin">
50-
<van-cell-group inset>
51-
<van-field v-model="postData.username" :rules="rules.username" name="username" :placeholder="t('login.username')" left-icon="contact" />
52-
<van-field v-model="postData.password" :rules="rules.password" name="password" :placeholder="t('login.password')" left-icon="lock" type="password" />
53-
</van-cell-group>
54-
<div class="m-16">
55-
<van-button :loading="loading" round block type="primary" native-type="submit">
56-
{{ t('login.logout') }}
57-
</van-button>
58-
</div>
59-
</van-form>
44+
<div class="m-x-a w-7xl text-center">
45+
<div class="mb-32 mt-64">
46+
<van-image :src="defaultAvatar" round class="h-64 w-64" />
6047
</div>
61-
</Container>
48+
<van-form :model="postData" :rules="rules" @submit="asyncLogin">
49+
<van-cell-group inset>
50+
<van-field v-model="postData.username" :rules="rules.username" name="username" :placeholder="t('login.username')" left-icon="contact" />
51+
<van-field v-model="postData.password" :rules="rules.password" name="password" :placeholder="t('login.password')" left-icon="lock" type="password" />
52+
</van-cell-group>
53+
<div class="m-16">
54+
<van-button :loading="loading" round block type="primary" native-type="submit">
55+
{{ t('login.logout') }}
56+
</van-button>
57+
</div>
58+
</van-form>
59+
</div>
6260
</template>
6361

6462
<route lang="json">
6563
{
6664
"name": "login",
6765
"meta": {
68-
"level": 2,
6966
"i18n": "home.login"
7067
}
7168
}

0 commit comments

Comments
 (0)