revert(achievement): 去掉进度条动画
保留奖章的题单来源,只回退 0 → 真值那套触发动画的处理和拉长的过渡时长, 圆环和进度条回到直接显示终值。
This commit is contained in:
@@ -48,17 +48,6 @@ const rarities = computed(() =>
|
|||||||
(a, b) => RARITY_RANK[a.rarity] - RARITY_RANK[b.rarity],
|
(a, b) => RARITY_RANK[a.rarity] - RARITY_RANK[b.rarity],
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
|
|
||||||
// 数据是异步来的,卡片挂上去时百分比就是终值,CSS 过渡不会触发。
|
|
||||||
// 先按 0 渲染一帧,下一帧再填真值,圆环和进度条才有"长出来"的动画
|
|
||||||
const grown = ref(false)
|
|
||||||
const percent = computed(() =>
|
|
||||||
grown.value ? (summary.value?.percent ?? 0) : 0,
|
|
||||||
)
|
|
||||||
function rarityPercent(r: { unlocked: number; total: number }) {
|
|
||||||
if (!grown.value || !r.total) return 0
|
|
||||||
return (r.unlocked / r.total) * 100
|
|
||||||
}
|
|
||||||
const badges = ref<UserBadge[]>([])
|
const badges = ref<UserBadge[]>([])
|
||||||
const { isDesktop } = useBreakpoints()
|
const { isDesktop } = useBreakpoints()
|
||||||
const tab = ref("all")
|
const tab = ref("all")
|
||||||
@@ -74,7 +63,6 @@ const filtered = computed(() => {
|
|||||||
|
|
||||||
async function load() {
|
async function load() {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
grown.value = false
|
|
||||||
try {
|
try {
|
||||||
const [list, sum, badgeRes] = await Promise.all([
|
const [list, sum, badgeRes] = await Promise.all([
|
||||||
getAchievements(name.value),
|
getAchievements(name.value),
|
||||||
@@ -88,9 +76,6 @@ async function load() {
|
|||||||
} finally {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
}
|
}
|
||||||
// 等卡片以 0 渲染完这一帧,再切到真值
|
|
||||||
await nextTick()
|
|
||||||
requestAnimationFrame(() => requestAnimationFrame(() => (grown.value = true)))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(load)
|
onMounted(load)
|
||||||
@@ -104,17 +89,10 @@ watch(name, load)
|
|||||||
<n-flex vertical align="center" :size="6">
|
<n-flex vertical align="center" :size="6">
|
||||||
<n-progress
|
<n-progress
|
||||||
type="circle"
|
type="circle"
|
||||||
:percentage="percent"
|
:percentage="summary.percent"
|
||||||
:stroke-width="8"
|
:stroke-width="8"
|
||||||
class="grow"
|
|
||||||
>
|
>
|
||||||
<n-text strong>
|
<n-text strong>{{ summary.percent }}%</n-text>
|
||||||
<n-number-animation
|
|
||||||
:from="0"
|
|
||||||
:to="summary.percent"
|
|
||||||
:duration="900"
|
|
||||||
/>%
|
|
||||||
</n-text>
|
|
||||||
</n-progress>
|
</n-progress>
|
||||||
<n-text depth="3" class="nowrap">
|
<n-text depth="3" class="nowrap">
|
||||||
已获得 {{ summary.unlocked }} / {{ summary.total }}
|
已获得 {{ summary.unlocked }} / {{ summary.total }}
|
||||||
@@ -134,9 +112,8 @@ watch(name, load)
|
|||||||
</n-text>
|
</n-text>
|
||||||
<n-progress
|
<n-progress
|
||||||
style="flex: 1"
|
style="flex: 1"
|
||||||
class="grow"
|
|
||||||
type="line"
|
type="line"
|
||||||
:percentage="rarityPercent(r)"
|
:percentage="r.total ? (r.unlocked / r.total) * 100 : 0"
|
||||||
:height="6"
|
:height="6"
|
||||||
:border-radius="3"
|
:border-radius="3"
|
||||||
:fill-border-radius="3"
|
:fill-border-radius="3"
|
||||||
@@ -242,24 +219,4 @@ watch(name, load)
|
|||||||
.source a:hover {
|
.source a:hover {
|
||||||
color: var(--n-text-color);
|
color: var(--n-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* naive 自带过渡,但圆环 stroke-dasharray 只有 .3s、线条 max-width 只有 .2s,
|
|
||||||
配合 0 → 真值那一下太快看不出来,这里拉长 */
|
|
||||||
.grow :deep(.n-progress-graph-circle-fill) {
|
|
||||||
transition:
|
|
||||||
opacity 0.3s var(--n-bezier),
|
|
||||||
stroke 0.3s var(--n-bezier),
|
|
||||||
stroke-dasharray 0.9s cubic-bezier(0.25, 1, 0.5, 1);
|
|
||||||
}
|
|
||||||
.grow :deep(.n-progress-graph-line-fill) {
|
|
||||||
transition:
|
|
||||||
background-color 0.3s var(--n-bezier),
|
|
||||||
max-width 0.9s cubic-bezier(0.25, 1, 0.5, 1);
|
|
||||||
}
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
.grow :deep(.n-progress-graph-circle-fill),
|
|
||||||
.grow :deep(.n-progress-graph-line-fill) {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user