fix(sidebar): scroll animation not working with sidebarDuration prop#3169
Merged
xiaoyatong merged 1 commit intojdf2e:feat_v3.xfrom Apr 11, 2025
Merged
fix(sidebar): scroll animation not working with sidebarDuration prop#3169xiaoyatong merged 1 commit intojdf2e:feat_v3.xfrom
xiaoyatong merged 1 commit intojdf2e:feat_v3.xfrom
Conversation
Walkthrough此次改动更新了 SideBar 组件中 Changes
Sequence Diagram(s)sequenceDiagram
participant User as 用户
participant SideBar as 侧边栏组件
participant Animator as 动画处理器
User->>SideBar: 触发滚动事件
SideBar->>SideBar: 检查 sidebarDuration
alt sidebarDuration == 0
SideBar->>SideBar: 直接设置 scrollTop 为目标值
else sidebarDuration > 0
SideBar->>Animator: 计算动画帧数
loop 每一帧
Animator->>SideBar: 根据进度更新 scrollTop
end
end
SideBar->>User: 滚动完成
Possibly related PRs
Suggested reviewers
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
3.x
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3169 +/- ##
=============================================
+ Coverage 87.18% 87.19% +0.01%
=============================================
Files 279 279
Lines 18537 18537
Branches 2820 2821 +1
=============================================
+ Hits 16161 16164 +3
+ Misses 2371 2368 -3
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/packages/sidebar/sidebar.taro.tsx (1)
113-135: 建议添加对极小 sidebarDuration 值的处理当
sidebarDuration非常小时，frames可能计算为 0，这会导致progress = count / frames出现除零错误。建议添加安全检查：
const scrollDirection = (to: number) => { if (sidebarDuration === 0) { setScrollTop(to) return } const from = scrollTop const frames = Math.round(sidebarDuration / 16) + // 确保至少有一帧动画 + const safeFrames = Math.max(1, frames) let count = 0 function animate() { - const progress = count / frames + const progress = count / safeFrames const current = from + (to - from) * progress setScrollTop(current) - if (count < frames) { + if (count < safeFrames) { count++ raf(animate) } } animate() }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/packages/sidebar/sidebar.taro.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (4)
src/packages/sidebar/sidebar.taro.tsx (4)
114-117: 优化了 sidebarDuration 为 0 时的处理逻辑当
sidebarDuration为 0 时，直接设置目标滚动位置并立即返回，避免了不必要的动画帧计算，提高了性能并使行为更符合预期。
119-120: 动画帧数计算逻辑合理基于
sidebarDuration计算动画帧数的方法恰当，以 16ms 作为帧率基准符合常见的动画标准。
124-126: 动画过渡计算逻辑清晰使用线性插值（Linear Interpolation）计算当前滚动位置的方法直观且高效，
progress变量的引入使代码更易读。
128-130: 简化了动画循环条件将动画继续的条件简化为
count < frames，并在条件内部递增计数器，逻辑更清晰。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit