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

2026-07-08 11:38:24 +08:00
parent 477f052cbd
commit f3b825bdf9
2 changed files with 12 additions and 1 deletions
@@ -27,7 +27,8 @@
    <view
      wx:for="{{rankedList}}"
      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' : ''}}">
        <text wx:if="{{item.rank === 1}}">🥇</text>
@@ -174,3 +174,13 @@
  color: var(--primary);
  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); }
+}