refactor(css): replace background transition with background-color by li-jia-nan · Pull Request #56598 · ant-design/ant-design

li-jia-nan · 2026-01-13T20:07:02Z

🤔 This is a ...

🔗 Related Issues

Describe the source of related requirements, such as links to relevant issue discussions.

For example: close #xxxx, fix #xxxx

💡 Background and Solution

将 transition: background 调整为 transition: background-color，background 为复合属性，整体参与 transition，属于非推荐写法

Language	Changelog
🇺🇸 English	fix(css): replace background transition with background-color
🇨🇳 Chinese	fix(css): replace background transition with background-color

bolt-new-by-stackblitz · 2026-01-13T20:07:05Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2026-01-13T20:07:17Z

👁 Visual Regression Report for PR #56598 Failed ❌

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

Expected (Branch master)	Actual (Current PR)	Diff
list-vertical.dark.png	list-vertical.dark.png
table-sticky.dark.png	table-sticky.dark.png
table-sticky.default.png	table-sticky.default.png

Important

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

Visual diff is acceptable

gemini-code-assist · 2026-01-13T20:07:18Z

Summary of Changes

Hello @li-jia-nan, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request refines CSS transition declarations within several UI components by replacing the broad background transition with the more precise background-color. This adjustment aligns with CSS best practices, preventing potential unintended side effects that can arise from transitioning shorthand properties and ensuring smoother, more predictable visual animations.

Highlights

CSS Transition Property Refinement: Replaced the generic transition: background property with the more specific transition: background-color across multiple components to ensure precise and recommended CSS transition behavior.
Shorthand Property Best Practice: The change addresses the issue where background, as a CSS shorthand property, was being transitioned as a whole. This is considered a non-recommended practice, and the fix explicitly targets background-color for transitions.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

coderabbitai · 2026-01-13T20:07:18Z

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

统一将多个组件样式中的 CSS 过渡属性由 background 修改为更精确的 background-color，仅调整动画目标属性；不涉及逻辑、控制流或导出接口变更。

Changes

Cohort / File(s)	变更摘要
菜单样式 `components/menu/style/horizontal.ts`, `components/menu/style/index.ts`, `components/menu/style/vertical.ts`	将过渡属性中的 `background` 替换为 `background-color`（包括项、子菜单标题、箭头等），保持时长和缓动不变。
表单与选择类控件 `components/radio/style/index.ts`, `components/select/style/dropdown.ts`, `components/mentions/style/index.ts`	将单选、下拉项、Mentions 下拉项的过渡目标从 `background` 改为 `background-color`。
步骤与徽章 `components/steps/style/icon.ts`, `components/steps/style/inline.ts`, `components/steps/style/panel.ts`, `components/badge/style/index.ts`	步骤图标、内联项、面板项及徽章计数器的过渡属性由 `background` 改为 `background-color`。
日期/日历相关 `components/calendar/style/index.ts`, `components/date-picker/style/panel.ts`	日期单元、面板、时间面板等处将 `background` 过渡改为 `background-color`。
表格样式 `components/table/style/index.ts`, `components/table/style/virtual.ts`	表头、单元格过渡从 `background` 改为 `background-color`；虚拟表格选择器格式小调整（逗号位置）。
布局与侧栏触发器 `components/layout/style/sider.ts`	侧栏零宽触发器的过渡目标由 `background` 改为 `background-color`。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 分钟

Poem

🐰
背景色由浅入深跳，
从 background 到 background-color，
过渡更精准，细节更妙，
小兔点点头，样式静默跳舞。

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	描述与变更集相关，解释了为什么进行此更改（background是复合属性，不推荐用于transition）。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	标题准确反映了主要变更内容，即将CSS过渡属性从background替换为background-color。

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch transition-background-update

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-01-13T20:07:19Z

github-actions · 2026-01-13T20:09:10Z

size-limit report 📦

Path	Size
`dist/antd.min.js`	523.02 KB (-10 B 🔽)
`dist/antd-with-locales.min.js`	616.57 KB (+21 B 🔺)

Copilot

Pull request overview

This PR fixes CSS transition properties by replacing the shorthand background property with the more specific background-color property in transitions. Using background in transitions is not recommended because it's a composite property that includes background-image, background-position, etc., which can lead to unnecessary computations.

Changes:

Updated transition properties from background to background-color in Steps, Radio, and Menu components
Reformatted one transition array in horizontal menu style for consistency

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
components/steps/style/icon.ts	Changed icon transition from `background` to `background-color`
components/radio/style/index.ts	Changed radio button wrapper transition from `background` to `background-color`
components/menu/style/vertical.ts	Changed vertical menu item transition from `background` to `background-color`
components/menu/style/index.ts	Changed transitions from `background` to `background-color` in menu items, submenu arrows, and submenu containers (5 occurrences)
components/menu/style/horizontal.ts	Changed horizontal menu transition from `background` to `background-color` and reformatted array for consistency

components/steps/style/icon.ts

cloudflare-workers-and-pages · 2026-01-13T20:11:12Z

Deploying ant-design-next with Cloudflare Pages

Latest commit:	`95bcf7a`
Status:	✅ Deploy successful!
Preview URL:	https://aa37c81e.ant-design-next.pages.dev
Branch Preview URL:	https://transition-background-update.ant-design-next.pages.dev

View logs

cloudflare-workers-and-pages · 2026-01-13T20:11:46Z

Deploying ant-design with Cloudflare Pages

Latest commit:	`95bcf7a`
Status:	✅ Deploy successful!
Preview URL:	https://a863ba2e.ant-design.pages.dev
Branch Preview URL:	https://transition-background-update.ant-design.pages.dev

View logs

gemini-code-assist

Code Review

本次 PR 的修改将 CSS transition 属性中的 background 替换为了 background-color。这是一个很好的性能优化，因为 background 是一个复合属性，对其进行过渡（transition）可能会导致不必要的重绘，而只对 background-color 进行过渡则更高效。所有文件的修改都正确且一致地应用了这一实践。代码质量很好，我发现了一个可以改进代码可维护性的地方，并已在评论中提出建议。

codecov · 2026-01-13T20:17:00Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (0b55335) to head (95bcf7a).
⚠️ Report is 6 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master    #56598   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          807       807           
  Lines        14925     14925           
  Branches      3936      3936           
=========================================
  Hits         14925     14925

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

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

pkg-pr-new · 2026-01-13T20:18:26Z

More templates

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

commit: 95bcf7a

codecov · 2026-01-13T20:38:43Z

Bundle Report

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

Detailed changes

Bundle name	Size	Change
antd.min-array-push	3.86MB	286 bytes (0.01%) ⬆️

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`	143 bytes	2.12MB	0.01%
`antd.min.js`	143 bytes	1.74MB	0.01%

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

./components/badge/style/index.ts → Total Size: 9.95kB
./components/mentions/style/index.ts → Total Size: 8.16kB
./components/calendar/style/index.ts → Total Size: 6.39kB
./components/date-picker/style/panel.ts → Total Size: 18.14kB
./components/radio/style/index.ts → Total Size: 13.5kB

Files in antd.min.js:

./components/mentions/style/index.ts → Total Size: 8.16kB
./components/badge/style/index.ts → Total Size: 9.95kB
./components/calendar/style/index.ts → Total Size: 6.39kB
./components/date-picker/style/panel.ts → Total Size: 18.14kB
./components/radio/style/index.ts → Total Size: 13.5kB

components/badge/style/index.ts

fix(css): replace background transition with background-color

8eac6a7

Copilot AI review requested due to automatic review settings January 13, 2026 20:07

Copilot started reviewing on behalf of li-jia-nan January 13, 2026 20:07 View session

Copilot AI reviewed Jan 13, 2026

View reviewed changes

components/steps/style/icon.ts Show resolved Hide resolved

gemini-code-assist bot reviewed Jan 13, 2026

View reviewed changes

chore: update

2baf4c2

thinkasany reviewed Jan 14, 2026

View reviewed changes

components/badge/style/index.ts Show resolved Hide resolved

Merge branch 'master' into transition-background-update

95bcf7a

li-jia-nan changed the title ~~fix(css): replace background transition with background-color~~ refactor(css): replace background transition with background-color Jan 14, 2026

meet-student approved these changes Jan 15, 2026

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label Jan 15, 2026

li-jia-nan merged commit f7446f3 into master Jan 15, 2026
47 of 48 checks passed

li-jia-nan deleted the transition-background-update branch January 15, 2026 03:04

PeachScript mentioned this pull request Jan 20, 2026

docs: changelog for 6.2.1 #56667

Merged

17 tasks

Uh oh!

Conversation

li-jia-nan commented Jan 13, 2026

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

Uh oh!

bolt-new-by-stackblitz bot commented Jan 13, 2026

Uh oh!

github-actions bot commented Jan 13, 2026 • edited by li-jia-nan Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👁 Visual Regression Report for PR #56598 Failed ❌

Uh oh!

gemini-code-assist bot commented Jan 13, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

coderabbitai bot commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other AI code review bot(s) detected

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

github-actions bot commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

cloudflare-workers-and-pages bot commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying ant-design-next with Cloudflare Pages

Uh oh!

cloudflare-workers-and-pages bot commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying ant-design with Cloudflare Pages

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

codecov bot commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

pkg-pr-new bot commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions bot commented Jan 13, 2026 •

edited by li-jia-nan

Loading

coderabbitai bot commented Jan 13, 2026 •

edited

Loading

github-actions bot commented Jan 13, 2026 •

edited

Loading

github-actions bot commented Jan 13, 2026 •

edited

Loading

cloudflare-workers-and-pages bot commented Jan 13, 2026 •

edited

Loading

cloudflare-workers-and-pages bot commented Jan 13, 2026 •

edited

Loading

codecov bot commented Jan 13, 2026 •

edited

Loading

pkg-pr-new bot commented Jan 13, 2026 •

edited

Loading

codecov bot commented Jan 13, 2026 •

edited

Loading