Skip to content

Commit e98159f

Browse files
imsyyimsyy
committed
🌈 style: 优化部分动画速度
1 parent 4b78e9f commit e98159f

4 files changed

Lines changed: 98 additions & 41 deletions

File tree

‎src/components/List/ListDetail.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- 通用列表详情 -->
22
<template>
33
<div :class="['list-detail', { small: listScrolling }]">
4-
<Transition name="fade" mode="out-in">
4+
<Transition name="fade">
55
<div v-if="detailData" class="detail">
66
<div class="cover" v-if="!settingStore.hiddenCovers.list">
77
<n-image

‎src/components/List/SongList.vue‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!-- 歌曲列表 - 虚拟列表 -->
22
<template>
3-
<Transition name="fade" mode="out-in">
3+
<Transition name="fade">
44
<div v-if="!isEmpty(listData)" ref="songListRef" class="song-list">
5-
<Transition name="fade" mode="out-in">
5+
<Transition name="fade">
66
<div
77
:key="listKey"
88
:style="{
@@ -540,6 +540,13 @@ onBeforeUnmount(() => {
540540
height: 100%;
541541
border-radius: 12px 0 0 12px;
542542
overflow: hidden;
543+
// 离场时脱离文档流，避免新旧内容同时存在时布局跳动
544+
&.fade-leave-active {
545+
position: absolute;
546+
left: 0;
547+
right: 0;
548+
pointer-events: none;
549+
}
543550
.song-card {
544551
padding-bottom: 12px;
545552
// padding-right: 4px;
@@ -633,6 +640,13 @@ onBeforeUnmount(() => {
633640
height 0.3s,
634641
transform 0.3s,
635642
opacity 0.3s;
643+
// 离场时脱离文档流，避免新旧列表同时存在时布局跳动
644+
&.fade-leave-active {
645+
position: absolute;
646+
left: 0;
647+
right: 0;
648+
pointer-events: none;
649+
}
636650
.sticky-header {
637651
position: sticky;
638652
top: 0;

‎src/router/index.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,13 @@ router.afterEach((to, from) => {
5555
window.$loadingBar?.finish();
5656
// 路由变化时重置滚动位置（排除仅 hash 变化的情况）
5757
if (to.fullPath.split("#")[0] !== from.fullPath.split("#")[0]) {
58-
const mainContent = document.getElementById("main-content");
59-
if (mainContent) {
60-
const scrollContainer = mainContent.querySelector(".n-scrollbar-container");
61-
if (scrollContainer) scrollContainer.scrollTop = 0;
62-
}
58+
requestAnimationFrame(() => {
59+
const mainContent = document.getElementById("main-content");
60+
if (mainContent) {
61+
const scrollContainer = mainContent.querySelector(".n-scrollbar-container");
62+
if (scrollContainer) scrollContainer.scrollTop = 0;
63+
}
64+
});
6365
}
6466
});
6567

‎src/style/animate.scss‎

Lines changed: 74 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,55 @@
1-
// 路由动画
2-
.router-slide-enter-active,
1+
// 路由动画 - 离场动画尽量短，减少 out-in 等待时间
2+
.router-slide-enter-active {
3+
transition:
4+
opacity 0.2s ease,
5+
transform 0.2s ease;
6+
}
37
.router-slide-leave-active {
4-
transition: all 0.2s ease;
8+
transition:
9+
opacity 0.1s ease,
10+
transform 0.1s ease;
511
}
612
.router-slide-enter-from,
713
.router-slide-leave-to {
814
opacity: 0;
915
transform: translate3d(10px, 0, 0);
1016
}
1117

12-
.router-fade-enter-active,
18+
.router-fade-enter-active {
19+
transition: opacity 0.2s ease;
20+
}
1321
.router-fade-leave-active {
14-
transition: all 0.2s ease;
22+
transition: opacity 0.1s ease;
1523
}
1624
.router-fade-enter-from,
1725
.router-fade-leave-to {
1826
opacity: 0;
1927
}
2028

21-
.router-zoom-enter-active,
29+
.router-zoom-enter-active {
30+
transition:
31+
opacity 0.2s ease,
32+
transform 0.2s ease;
33+
}
2234
.router-zoom-leave-active {
23-
transition: all 0.2s ease;
35+
transition:
36+
opacity 0.1s ease,
37+
transform 0.1s ease;
2438
}
2539
.router-zoom-enter-from,
2640
.router-zoom-leave-to {
2741
opacity: 0;
2842
transform: scale(0.95);
2943
}
3044

31-
.router-up-enter-active,
32-
.router-up-leave-active {
45+
.router-up-enter-active {
3346
transition:
3447
opacity 0.2s ease,
3548
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
3649
}
50+
.router-up-leave-active {
51+
transition: opacity 0.1s ease;
52+
}
3753
.router-up-enter-from {
3854
opacity: 0;
3955
transform: translate3d(0, 20px, 0);
@@ -42,19 +58,20 @@
4258
opacity: 1;
4359
transform: translate3d(0, 0, 0);
4460
}
45-
.router-up-leave-active {
46-
transform: translate3d(0, 0, 0);
47-
}
4861
.router-up-leave-to {
4962
opacity: 0;
5063
}
5164

5265
// flow
53-
.router-flow-enter-active,
66+
.router-flow-enter-active {
67+
transition:
68+
opacity 0.35s cubic-bezier(0.2, 0, 0.2, 1),
69+
transform 0.35s cubic-bezier(0.2, 0, 0.2, 1);
70+
}
5471
.router-flow-leave-active {
5572
transition:
56-
opacity 0.4s cubic-bezier(0.2, 0, 0.2, 1),
57-
transform 0.4s cubic-bezier(0.2, 0, 0.2, 1);
73+
opacity 0.15s ease,
74+
transform 0.15s ease;
5875
}
5976
.router-flow-enter-from {
6077
opacity: 0;
@@ -67,10 +84,10 @@
6784

6885
// mask-left
6986
.router-mask-left-enter-active {
70-
transition: clip-path 0.6s cubic-bezier(0, 0, 0.2, 1);
87+
transition: clip-path 0.5s cubic-bezier(0, 0, 0.2, 1);
7188
}
7289
.router-mask-left-leave-active {
73-
transition: clip-path 0.25s ease-in;
90+
transition: clip-path 0.15s ease-in;
7491
}
7592
.router-mask-left-enter-from {
7693
clip-path: inset(0 100% 0 0);
@@ -87,10 +104,10 @@
87104

88105
// mask-top
89106
.router-mask-top-enter-active {
90-
transition: clip-path 0.6s cubic-bezier(0, 0, 0.2, 1);
107+
transition: clip-path 0.5s cubic-bezier(0, 0, 0.2, 1);
91108
}
92109
.router-mask-top-leave-active {
93-
transition: clip-path 0.25s ease-in;
110+
transition: clip-path 0.15s ease-in;
94111
}
95112
.router-mask-top-enter-from {
96113
clip-path: inset(0 0 100% 0);
@@ -106,9 +123,11 @@
106123
}
107124

108125
// fade
109-
.fade-enter-active,
126+
.fade-enter-active {
127+
transition: opacity 0.15s ease-in-out;
128+
}
110129
.fade-leave-active {
111-
transition: opacity 0.3s ease-in-out;
130+
transition: opacity 0.1s ease-in-out;
112131
}
113132

114133
.fade-enter-from,
@@ -117,11 +136,15 @@
117136
}
118137

119138
// fadeDown
120-
.fadeDown-enter-active,
139+
.fadeDown-enter-active {
140+
transition:
141+
opacity 0.15s ease,
142+
transform 0.15s ease;
143+
}
121144
.fadeDown-leave-active {
122145
transition:
123-
opacity 0.3s ease,
124-
transform 0.3s ease;
146+
opacity 0.1s ease,
147+
transform 0.1s ease;
125148
}
126149

127150
.fadeDown-enter-from,
@@ -131,13 +154,19 @@
131154
}
132155

133156
// left-sm
134-
.left-sm-enter-active,
157+
.left-sm-enter-active {
158+
opacity: 1;
159+
transform: translate3d(0, 0, 0);
160+
transition:
161+
transform 0.2s,
162+
opacity 0.2s;
163+
}
135164
.left-sm-leave-active {
136165
opacity: 1;
137166
transform: translate3d(0, 0, 0);
138167
transition:
139-
transform 0.3s,
140-
opacity 0.3s;
168+
transform 0.1s,
169+
opacity 0.1s;
141170
}
142171
.left-sm-enter-from,
143172
.left-sm-leave-to {
@@ -146,13 +175,19 @@
146175
}
147176

148177
// shrink
149-
.shrink-enter-active,
178+
.shrink-enter-active {
179+
opacity: 1;
180+
transform: scale(1);
181+
transition:
182+
transform 0.2s,
183+
opacity 0.2s;
184+
}
150185
.shrink-leave-active {
151186
opacity: 1;
152187
transform: scale(1);
153188
transition:
154-
transform 0.3s,
155-
opacity 0.3s;
189+
transform 0.1s,
190+
opacity 0.1s;
156191
}
157192
.shrink-enter-from,
158193
.shrink-leave-to {
@@ -161,13 +196,19 @@
161196
}
162197

163198
// zoom
164-
.zoom-enter-active,
199+
.zoom-enter-active {
200+
opacity: 1;
201+
transform: scale(1);
202+
transition:
203+
transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
204+
opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
205+
}
165206
.zoom-leave-active {
166207
opacity: 1;
167208
transform: scale(1);
168209
transition:
169-
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
170-
opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
210+
transform 0.1s ease,
211+
opacity 0.1s ease;
171212
}
172213
.zoom-enter-from,
173214
.zoom-leave-to {

0 commit comments

Comments
 (0)