root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加多种动画效果，包括触摸反馈、涟漪、弹性缩放和滑入动画，优化用户交互体验

Browse Source
This commit is contained in:
Seven
2026-01-03 17:27:30 +07:00
parent bea34a3e22
commit 1c931c40b3
2 changed files with 125 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/distribute/pages/index.vue
View File

@@ -116,12 +116,14 @@ useHead({
:label="locale === 'zh-CN' ? 'EN' : '中文'"
color="neutral"
variant="ghost"
class="transition-all duration-300 active:scale-90 touch-manipulation"
@click="toggleLanguage"
/>
<UButton
:icon="isDark ? 'i-heroicons-sun' : 'i-heroicons-moon'"
color="neutral"
variant="ghost"
class="transition-all duration-300 active:scale-90 active:rotate-180 touch-manipulation"
@click="colorMode.preference = isDark ? 'light' : 'dark'"
/>
</div>
@@ -146,13 +148,14 @@ useHead({
</div>
<!-- Categories -->
<div class="flex items-center gap-2 overflow-x-auto pb-2">
<div class="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-hide">
<UButton
v-for="category in categories"
:key="category.id"
:label="category.name[locale as 'zh-CN' | 'en-US']"
:color="selectedCategory === category.id ? 'primary' : 'neutral'"
:variant="selectedCategory === category.id ? 'solid' : 'ghost'"
class="transition-all duration-300 active:scale-90 touch-manipulation"
@click="selectedCategory = category.id"
/>
</div>
@@ -170,7 +173,7 @@ useHead({
<div class="absolute -inset-0.5 bg-gradient-to-r from-primary-500 via-purple-500 to-blue-500 rounded-2xl opacity-0 group-hover:opacity-100 blur transition-all duration-500 group-hover:blur-md"></div>
<UCard
class="cursor-pointer backdrop-blur-sm bg-white/90 dark:bg-gray-900/90 border border-gray-200/50 dark:border-gray-800/50 transition-all duration-500 hover:shadow-2xl hover:shadow-primary-500/20 hover:-translate-y-2 relative overflow-hidden"
class="cursor-pointer backdrop-blur-sm bg-white/90 dark:bg-gray-900/90 border border-gray-200/50 dark:border-gray-800/50 transition-all duration-500 hover:shadow-2xl hover:shadow-primary-500/20 hover:-translate-y-2 active:scale-95 active:shadow-lg relative overflow-hidden touch-manipulation"
@click="openAppDetail(app)"
>
<!-- 内部发光效果 -->
@@ -178,9 +181,9 @@ useHead({
<div class="flex items-start gap-4 relative z-10">
<!-- App Icon -->
<div class="size-16 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-2xl shrink-0 shadow-lg shadow-blue-500/50 relative overflow-hidden group-hover:shadow-2xl group-hover:shadow-blue-500/60 transition-all duration-500 group-hover:scale-110 group-hover:rotate-3 p-2">
<div class="absolute inset-0 bg-gradient-to-tr from-white/0 via-white/30 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-700"></div>
<img :src="app.icon" :alt="app.name" class="size-full object-contain relative z-10 rounded-lg" />
<div class="size-16 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-2xl shrink-0 shadow-lg shadow-blue-500/50 relative overflow-hidden group-hover:shadow-2xl group-hover:shadow-blue-500/60 transition-all duration-500 group-hover:scale-110 group-hover:rotate-3 group-active:scale-105 group-active:rotate-1 p-2">
<div class="absolute inset-0 bg-gradient-to-tr from-white/0 via-white/30 to-white/0 translate-x-[-100%] group-hover:translate-x-[100%] group-active:translate-x-[50%] transition-transform duration-700"></div>
<img :src="app.icon" :alt="app.name" class="size-full object-contain relative z-10 rounded-lg transition-transform duration-300 group-active:scale-95" />
</div>
<!-- App Info -->
@@ -207,7 +210,7 @@ useHead({
label="iOS"
size="sm"
block
class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1"
class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1 active:scale-95 active:shadow-md touch-manipulation"
@click.stop="handleDownload(app, 'ios')"
/>
<UButton
@@ -216,7 +219,7 @@ useHead({
label="Android"
size="sm"
block
class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1"
class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1 active:scale-95 active:shadow-md touch-manipulation"
@click.stop="handleDownload(app, 'android')"
/>
<UButton
@@ -225,7 +228,7 @@ useHead({
label="Web"
size="sm"
block
class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1"
class="transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/50 hover:-translate-y-1 active:scale-95 active:shadow-md touch-manipulation"
@click.stop="handleDownload(app, 'h5')"
/>
</div>