-
-
Notifications
You must be signed in to change notification settings - Fork 14.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(docs): theme switch use startViewTransition api #14489
Conversation
🧪 Playground Preview: https://element-plus.run/?pr=14489 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's such a wonderful thing.
However, I think we need confirmation from the designer!
@ryuhangyeong It has been confirmed with the designer that we can add this feature. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When switching from light mode to dark mode, the toggle button appears frozen. (Animation is applied when changing from dark mode to light mode)
Is this by design?
Rigorous and precise observation.. 👍 |
docs/.vitepress/vitepress/components/common/vp-theme-toggler.vue
Outdated
Show resolved
Hide resolved
@tolking Regarding the problem mentioned by @ryuhangyeong, I haven't found a solution. Do you have any suggestions? 🤔 |
@ryuhangyeong Maybe we can keep it this way for now? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure! Let's think about the problem together later!
Okay, let's merge this pr first. |
Please make sure these boxes are checked before submitting your PR, thank you!
dev
branch.Description
🤖 Generated by Copilot at 2287219
This pull request enhances the theme toggling feature of the documentation website by adding a smooth animation effect for the
vp-theme-toggler
component. It also improves the code style and readability of thebase.scss
file. It mainly modifies the filesvp-theme-toggler.vue
andbase.scss
using the Transition API.Related Issue
Fixes #___.
Explanation of Changes
🤖 Generated by Copilot at 2287219
nextTick
function fromvue
and addswitchTheme
andbeforeChange
functions to handle theme transition animation using Transition API invp-theme-toggler.vue
(link, link)::view-transition-old(root)
and::view-transition-new(root)
to create theme transition effect depending on dark or light mode inbase.scss
(link)base.scss
(link, link, link)base.scss
(link, link, link)