feat: 排行榜行依次滑入动画 (前 10 行 60ms 错开)

This commit is contained in:
2026-07-08 11:38:24 +08:00
parent 477f052cbd
commit f3b825bdf9
2 changed files with 12 additions and 1 deletions
+2 -1
View File
@@ -27,7 +27,8 @@
<view <view
wx:for="{{rankedList}}" wx:for="{{rankedList}}"
wx:key="openid" wx:key="openid"
class="rank-item {{item.openid === myEntry.openid ? 'is-me' : ''}}" class="rank-item {{item.openid === myEntry.openid ? 'is-me' : ''}} rank-item--enter"
style="animation-delay: {{index < 10 ? index * 60 : 0}}ms;"
> >
<view class="rank-num {{item.rank === 1 ? 'gold' : item.rank === 2 ? 'silver' : item.rank === 3 ? 'bronze' : ''}}"> <view class="rank-num {{item.rank === 1 ? 'gold' : item.rank === 2 ? 'silver' : item.rank === 3 ? 'bronze' : ''}}">
<text wx:if="{{item.rank === 1}}">🥇</text> <text wx:if="{{item.rank === 1}}">🥇</text>
+10
View File
@@ -174,3 +174,13 @@
color: var(--primary); color: var(--primary);
font-weight: 600; font-weight: 600;
} }
/* ---- rank item entrance animation ---- */
.rank-item--enter {
animation: rankIn 0.4s cubic-bezier(0.2, 0, 0.2, 1) both;
}
@keyframes rankIn {
from { opacity: 0; transform: translateX(-20rpx); }
to { opacity: 1; transform: translateX(0); }
}