Skip to content

refactor: improve animation performance#52881

Merged
afc163 merged 2 commits intomasterfrom
slick-update
Feb 19, 2025
Merged

refactor: improve animation performance#52881
afc163 merged 2 commits intomasterfrom
slick-update

Conversation

@li-jia-nan
Copy link
Copy Markdown
Member

@li-jia-nan li-jia-nan commented Feb 18, 2025 •
edited
Loading

中文版模板 / Chinese template

🤔 This is a ...

  • 🆕 New feature
  • 🐞 Bug fix
  • 📝 Site / documentation improvement
  • 📽️ Demo improvement
  • 💄 Component style improvement
  • 🤖 TypeScript definition improvement
  • 📦 Bundle size optimization
  • ⚡️ Performance optimization
  • ⭐️ Feature enhancement
  • 🌐 Internationalization
  • 🛠 Refactoring
  • 🎨 Code style optimization
  • ✅ Test Case
  • 🔀 Branch merge
  • ⏩ Workflow
  • ❓ Other (about what?)

🔗 Related Issues

  • Describe the source of related requirements, such as links to relevant issue discussions.
  • For example: close #xxxx, fix #xxxx

💡 Background and Solution

iShot_2025-02-18_23.59.50.mp4

📝 Change Log

Language Changelog
🇺🇸 English 1. 移除了cssinjs 中多余的嵌套结构
2. 使用 transform: translate 重构了 width，修复了动画卡顿的问题
🇨🇳 Chinese 1. 移除了cssinjs 中多余的嵌套结构
2. 使用 transform: translate 重构了 width，修复了动画卡顿的问题

@bolt-new-by-stackblitz
Copy link
Copy Markdown

bolt-new-by-stackblitz Bot commented Feb 18, 2025

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 18, 2025 •
edited
Loading

Preview is ready

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 18, 2025 •
edited by li-jia-nan
Loading

👁 Visual Regression Report for PR #52881 Failed ❌

🎯 Target branch: master (dd20460)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🔄 3 changed

Expected (Branch master) Actual (Current PR) Diff
input-number-debug-token.compact.png input-number-debug-token.compact.png input-number-debug-token.compact.css-var.png input-number-debug-token.compact.css-var.png
input-number-debug-token.dark.png input-number-debug-token.dark.png input-number-debug-token.dark.css-var.png input-number-debug-token.dark.css-var.png
input-number-debug-token.default.png input-number-debug-token.default.png input-number-debug-token.default.css-var.png input-number-debug-token.default.css-var.png

Important

There are 3 diffs found in this PR: 🔄 3 changed.
Please check all items:

  • Visual diff is acceptable

@petercat-assistant
Copy link
Copy Markdown

petercat-assistant Bot commented Feb 18, 2025

Walkthrough

This pull request focuses on refactoring the animation performance in the carousel component. The main change involves replacing the use of width with transform: translate to address animation stuttering issues. Additionally, some style adjustments and variable renaming were made to improve code clarity and maintainability.

Changes

Files Summary
components/carousel/demo/dot-duration.tsx Reduced autoplay speed from 5000ms to 3000ms for better performance.
components/carousel/style/index.ts Refactored style definitions to use transform: translate for smoother animations and improved style structure.
components/checkbox/Group.tsx Renamed memoOptions to memoizedOptions for better clarity.

petercat-assistant[bot]
petercat-assistant Bot reviewed Feb 18, 2025
View reviewed changes
Comment thread components/carousel/demo/dot-duration.tsx Outdated
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 18, 2025 •
edited
Loading

size-limit report 📦

Path Size
dist/antd.min.js 447.79 KB (-9 B 🔽)
dist/antd-with-locales.min.js 532.92 KB (-2 B 🔽)

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Feb 18, 2025 •
edited
Loading

Open in Stackblitz

More templates

npm i https://pkg.pr.new/ant-design/ant-design/antd@52881

commit: bda6e31

@li-jia-nan li-jia-nan mentioned this pull request Feb 18, 2025
Merged
16 tasks
@codecov
Copy link
Copy Markdown

codecov Bot commented Feb 18, 2025 •
edited
Loading

Bundle Report

Changes will increase total bundle size by 34 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
antd.min-array-push 3.38MB 34 bytes (0.0%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: antd.min-array-push

Assets Changed:

Asset Name Size Change Total Size Change (%)
antd-with-locales.min.js 17 bytes 1.84MB 0.0%
antd.min.js 17 bytes 1.54MB 0.0%

Files in antd-with-locales.min.js:

  • ./components/carousel/style/index.ts → Total Size: 9.68kB

Files in antd.min.js:

  • ./components/carousel/style/index.ts → Total Size: 9.68kB

@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented Feb 18, 2025 •
edited
Loading

Deploying ant-design with  Cloudflare Pages  Cloudflare Pages

Latest commit: bda6e31
Status: ✅  Deploy successful!
Preview URL: https://398911e2.ant-design.pages.dev
Branch Preview URL: https://slick-update.ant-design.pages.dev

View logs

@codecov
Copy link
Copy Markdown

codecov Bot commented Feb 18, 2025 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (dd20460) to head (bda6e31).
Report is 2 commits behind head on master.

Additional details and impacted files 
@@            Coverage Diff            @@
##            master    #52881   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          768       768           
  Lines        13840     13840           
  Branches      3628      3628           
=========================================
  Hits         13840     13840

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@afc163 afc163 merged commit 0fb32e7 into master Feb 19, 2025
@afc163 afc163 deleted the slick-update branch February 19, 2025 01:39
@PeachScript PeachScript mentioned this pull request Feb 24, 2025
Merged
16 tasks
renny-ren pushed a commit to renny-ren/ant-design that referenced this pull request Apr 14, 2025
@li-jia-nan @renny-ren
refactor: improve animation performance (ant-design#52881)
33bf804 
* pref: improve animation performance

* pref: improve animation performance
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@afc163 afc163 afc163 approved these changes

+1 more reviewer

@petercat-assistant petercat-assistant[bot] petercat-assistant[bot] left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@li-jia-nan @afc163