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],
|
||||
),
|
||||
)
|
||||
|
||||
// 数据是异步来的,卡片挂上去时百分比就是终值,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 { isDesktop } = useBreakpoints()
|
||||
const tab = ref("all")
|
||||
@@ -74,7 +63,6 @@ const filtered = computed(() => {
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
grown.value = false
|
||||
try {
|
||||
const [list, sum, badgeRes] = await Promise.all([
|
||||
getAchievements(name.value),
|
||||
@@ -88,9 +76,6 @@ async function load() {
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
// 等卡片以 0 渲染完这一帧,再切到真值
|
||||
await nextTick()
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => (grown.value = true)))
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
@@ -104,17 +89,10 @@ watch(name, load)
|
||||
<n-flex vertical align="center" :size="6">
|
||||
<n-progress
|
||||
type="circle"
|
||||
:percentage="percent"
|
||||
:percentage="summary.percent"
|
||||
:stroke-width="8"
|
||||
class="grow"
|
||||
>
|
||||
<n-text strong>
|
||||
<n-number-animation
|
||||
:from="0"
|
||||
:to="summary.percent"
|
||||
:duration="900"
|
||||
/>%
|
||||
</n-text>
|
||||
<n-text strong>{{ summary.percent }}%</n-text>
|
||||
</n-progress>
|
||||
<n-text depth="3" class="nowrap">
|
||||
已获得 {{ summary.unlocked }} / {{ summary.total }}
|
||||
@@ -134,9 +112,8 @@ watch(name, load)
|
||||
</n-text>
|
||||
<n-progress
|
||||
style="flex: 1"
|
||||
class="grow"
|
||||
type="line"
|
||||
:percentage="rarityPercent(r)"
|
||||
:percentage="r.total ? (r.unlocked / r.total) * 100 : 0"
|
||||
:height="6"
|
||||
:border-radius="3"
|
||||
:fill-border-radius="3"
|
||||
@@ -242,24 +219,4 @@ watch(name, load)
|
||||
.source a:hover {
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user