feat: 排行榜行依次滑入动画 (前 10 行 60ms 错开)
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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); }
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user