Skip to content

Commit bd97f54

Browse files
ikxinikxin
committed
feat: 集成 motion-v 增强组件间的动画效果
1 parent db3c576 commit bd97f54

19 files changed

Lines changed: 855 additions & 280 deletions

‎app/assets/css/main.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,23 @@
11
body {
2+
background:
3+
radial-gradient(
4+
circle at top left,
5+
rgba(232, 83, 73, 0.08),
6+
transparent 28%
7+
),
8+
radial-gradient(
9+
circle at top right,
10+
rgba(48, 111, 255, 0.08),
11+
transparent 32%
12+
),
13+
linear-gradient(
14+
180deg,
15+
var(--color-bg-1) 0%,
16+
var(--color-neutral-2) 46%,
17+
var(--color-bg-1) 100%
18+
);
219
background-color: var(--color-neutral-2);
20+
background-attachment: fixed;
321
color: var(--color-text-2);
422
--border-radius-small: 4px;
523
--border-radius-medium: 6px;
@@ -10,6 +28,38 @@ body {
1028
@apply flex min-h-screen flex-col gap-4;
1129
}
1230

31+
a,
32+
button,
33+
.arco-btn,
34+
.arco-card,
35+
.arco-menu-item,
36+
.arco-link {
37+
transition:
38+
transform 0.25s ease,
39+
box-shadow 0.25s ease,
40+
border-color 0.25s ease,
41+
background-color 0.25s ease,
42+
color 0.25s ease;
43+
}
44+
45+
/* .arco-card,
46+
.arco-collapse,
47+
.arco-collapse-item,
48+
.arco-collapse-item-header,
49+
.arco-collapse-item-content,
50+
.arco-menu,
51+
.arco-menu-inner,
52+
.arco-menu-light,
53+
.arco-layout-sider,
54+
.arco-layout-sider-light,
55+
.arco-layout-sider-children,
56+
.arco-menu-inline-header,
57+
.arco-menu-inline-content,
58+
.arco-menu-item,
59+
.arco-menu-item-inner {
60+
background-color: transparent !important;
61+
} */
62+
1363
.arco-drawer-body {
1464
padding: 0;
1565
}

‎app/components/AppFooter.vue‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
<script lang="ts" setup>
2+
import { motion } from 'motion-v'
3+
24
const { t } = useI18n()
5+
6+
const { hidden, hoverLift, press, viewport, visible } = useMotionPresets()
37
</script>
48

59
<template>
@@ -8,24 +12,40 @@ const { t } = useI18n()
812
class="mx-auto flex min-h-14 max-w-full flex-col items-center justify-center gap-1 py-3 text-center text-sm md:flex-row md:gap-0 md:py-0"
913
>
1014
<ASpace wrap class="justify-center">
11-
<div>
15+
<motion.div
16+
:initial="hidden(14)"
17+
:whileInView="visible()"
18+
:inViewOptions="viewport"
19+
:whileHover="hoverLift(3, 1.01)"
20+
>
1221
Copyright &copy; {{ new Date().getFullYear() }}
1322
<ALink target="_blank" href="https://github.com/ikxin/kms-tools">
1423
KMS Tools
1524
</ALink>
16-
</div>
17-
<div>
25+
</motion.div>
26+
<motion.div
27+
:initial="hidden(14)"
28+
:whileInView="visible(0.05)"
29+
:inViewOptions="viewport"
30+
:whileHover="hoverLift(3, 1.01)"
31+
>
1832
Running on
1933
<ALink target="_blank" href="https://www.asiayun.com/aff/TVXVRALM">
2034
AsiaYun
2135
</ALink>
22-
</div>
23-
<div>
36+
</motion.div>
37+
<motion.div
38+
:initial="hidden(14)"
39+
:whileInView="visible(0.1)"
40+
:inViewOptions="viewport"
41+
:whileHover="hoverLift(3, 1.01)"
42+
:whilePress="press"
43+
>
2444
Code with by
2545
<ALink target="_blank" href="https://blog.ikxin.com">
2646
{{ t('label.author') }}
2747
</ALink>
28-
</div>
48+
</motion.div>
2949
</ASpace>
3050
</div>
3151
</ALayoutFooter>

‎app/components/AppHeader.vue‎

Lines changed: 80 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
<script setup lang="ts">
2+
import { motion } from 'motion-v'
3+
import logoUrl from '~/assets/icons/kms-tools.svg'
4+
25
const route = useRoute()
36
47
const { locales, t, setLocale } = useI18n()
58
9+
const { hidden, hoverLift, press, visible } = useMotionPresets()
10+
611
const localePath = useLocalePath()
712
813
const path = computed(() => route.path.slice(1).split('/'))
914
15+
const activeSection = computed(() => path.value[0] || '')
16+
1017
const drawerVisible = ref(false)
1118
1219
const navItems = computed(() => [
@@ -50,45 +57,63 @@ function handleNavClick(name: string) {
5057

5158
<template>
5259
<ALayoutHeader
53-
class="sticky top-0 z-[100] flex h-20 select-none items-center bg-[--color-bg-2] px-4 shadow-md"
60+
class="sticky top-0 z-[100] flex h-20 select-none items-center border-b border-white/10 bg-[--color-bg-2]/80 px-4 shadow-md backdrop-blur-xl"
5461
>
5562
<div class="mx-auto flex w-[72rem] max-w-full items-center justify-between">
56-
<img
57-
src="/assets/icons/kms-tools.svg"
63+
<motion.img
64+
:src="logoUrl"
5865
alt="KMS Tools"
5966
class="h-14 w-auto cursor-pointer"
67+
:initial="hidden(10)"
68+
:animate="visible(0.02)"
69+
:whileHover="{ scale: 1.04, rotate: -2 }"
70+
:whilePress="press"
6071
@click="navigateTo(localePath('/'))"
6172
/>
6273

63-
<!-- Desktop Menu -->
64-
<AMenu
65-
:selected-keys="path"
66-
mode="horizontal"
67-
class="hidden grow md:flex [&_.arco-menu-overflow-wrap]:text-end [&_.arco-menu-selected-label]:left-4"
68-
>
69-
<AMenuItem
74+
<nav class="hidden grow items-center justify-center gap-2 md:flex">
75+
<motion.button
7076
v-for="item in navItems"
7177
:key="item.name"
72-
class="!inline-flex items-center gap-1"
78+
type="button"
79+
class="relative flex items-center gap-2 overflow-hidden rounded-full px-4 py-2 text-sm font-medium text-[var(--color-text-2)] transition-colors hover:text-[var(--color-text-1)]"
80+
:initial="hidden(10)"
81+
:animate="visible(navItems.findIndex(nav => nav.name === item.name) * 0.05 + 0.08)"
82+
:whileHover="hoverLift(4, 1.02)"
83+
:whilePress="press"
7384
@click="handleNavClick(item.name)"
7485
>
75-
<Icon :name="item.icon" />
76-
<span>{{ item.label }}</span>
77-
</AMenuItem>
78-
</AMenu>
86+
<motion.span
87+
v-if="activeSection === item.name"
88+
layoutId="header-nav-pill"
89+
class="absolute inset-0 rounded-full bg-[rgb(var(--primary-6))]/14 ring-1 ring-[rgb(var(--primary-6))]/20"
90+
/>
91+
<span class="relative z-[1] inline-flex items-center gap-2">
92+
<Icon :name="item.icon" />
93+
<span>{{ item.label }}</span>
94+
</span>
95+
</motion.button>
96+
</nav>
7997

8098
<ASpace>
8199
<ADropdown>
82-
<AButton size="small" type="secondary">
83-
<template #icon>
84-
<ClientOnly>
85-
<Icon :name="`icons:${$colorMode.preference}-mode`" />
86-
<template #fallback>
87-
<Icon :name="`icons:system-mode`" />
88-
</template>
89-
</ClientOnly>
90-
</template>
91-
</AButton>
100+
<motion.div
101+
:initial="hidden(10)"
102+
:animate="visible(0.14)"
103+
:whileHover="hoverLift(3, 1.04)"
104+
:whilePress="press"
105+
>
106+
<AButton size="small" type="secondary">
107+
<template #icon>
108+
<ClientOnly>
109+
<Icon :name="`icons:${$colorMode.preference}-mode`" />
110+
<template #fallback>
111+
<Icon :name="`icons:system-mode`" />
112+
</template>
113+
</ClientOnly>
114+
</template>
115+
</AButton>
116+
</motion.div>
92117
<template #content>
93118
<ADoption
94119
v-for="item in themeItems"
@@ -103,9 +128,16 @@ function handleNavClick(name: string) {
103128
</template>
104129
</ADropdown>
105130
<ADropdown>
106-
<AButton size="small" type="secondary">
107-
<template #icon><Icon name="icons:languages" /></template>
108-
</AButton>
131+
<motion.div
132+
:initial="hidden(10)"
133+
:animate="visible(0.18)"
134+
:whileHover="hoverLift(3, 1.04)"
135+
:whilePress="press"
136+
>
137+
<AButton size="small" type="secondary">
138+
<template #icon><Icon name="icons:languages" /></template>
139+
</AButton>
140+
</motion.div>
109141
<template #content>
110142
<ADoption
111143
v-for="locale in locales"
@@ -120,16 +152,30 @@ function handleNavClick(name: string) {
120152
</template>
121153
</ADropdown>
122154
<a target="_blank" href="https://github.com/ikxin/kms-tools">
123-
<AButton size="small" type="secondary">
124-
<template #icon><Icon name="icons:github" /></template>
125-
</AButton>
155+
<motion.div
156+
:initial="hidden(10)"
157+
:animate="visible(0.22)"
158+
:whileHover="hoverLift(3, 1.04)"
159+
:whilePress="press"
160+
>
161+
<AButton size="small" type="secondary">
162+
<template #icon><Icon name="icons:github" /></template>
163+
</AButton>
164+
</motion.div>
126165
</a>
127166

128167
<!-- Mobile Hamburger -->
129168
<div class="md:hidden">
130-
<AButton size="small" type="secondary" @click="drawerVisible = true">
131-
<template #icon><Icon name="material-symbols:menu" /></template>
132-
</AButton>
169+
<motion.div
170+
:initial="hidden(10)"
171+
:animate="visible(0.24)"
172+
:whileHover="hoverLift(3, 1.04)"
173+
:whilePress="press"
174+
>
175+
<AButton size="small" type="secondary" @click="drawerVisible = true">
176+
<template #icon><Icon name="material-symbols:menu" /></template>
177+
</AButton>
178+
</motion.div>
133179
</div>
134180
</ASpace>
135181
</div>

0 commit comments

Comments
 (0)