Skip to content
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

Merged
merged 3 commits into from
Oct 12, 2023

Conversation

btea
Copy link
Collaborator

@btea btea commented Oct 9, 2023

Please make sure these boxes are checked before submitting your PR, thank you!

  • Make sure you follow contributing guide English | (中文 | Español | Français).
  • Make sure you are merging your commits to dev branch.
  • Add some descriptions and refer to relative issues for your PR.

Description

view

🤖 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 the base.scss file. It mainly modifies the files vp-theme-toggler.vue and base.scss using the Transition API.

Related Issue

Fixes #___.

Explanation of Changes

🤖 Generated by Copilot at 2287219

  • Import nextTick function from vue and add switchTheme and beforeChange functions to handle theme transition animation using Transition API in vp-theme-toggler.vue (link, link)
  • Add CSS rules for pseudo-elements ::view-transition-old(root) and ::view-transition-new(root) to create theme transition effect depending on dark or light mode in base.scss (link)
  • Adjust spacing between selectors in some CSS rules for better readability in base.scss (link, link, link)
  • Add empty lines for formatting purposes in base.scss (link, link, link)

@github-actions
Copy link

github-actions bot commented Oct 9, 2023

@github-actions github-actions bot added the CommitMessage::Qualified Qualified commit message label Oct 9, 2023
@github-actions
Copy link

github-actions bot commented Oct 9, 2023

🧪 Playground Preview: https://element-plus.run/?pr=14489
Please comment the example via this playground if needed.

@btea btea requested a review from ryuhangyeong October 9, 2023 12:42
Copy link
Member

@ryuhangyeong ryuhangyeong left a 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!

@btea
Copy link
Collaborator Author

btea commented Oct 10, 2023

@ryuhangyeong It has been confirmed with the designer that we can add this feature.

Copy link
Member

@ryuhangyeong ryuhangyeong left a 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?

@btea
Copy link
Collaborator Author

btea commented Oct 10, 2023

Rigorous and precise observation.. 👍
This seems to be a bug, I will look into it later.

@btea
Copy link
Collaborator Author

btea commented Oct 11, 2023

@tolking Regarding the problem mentioned by @ryuhangyeong, I haven't found a solution. Do you have any suggestions? 🤔

@btea
Copy link
Collaborator Author

btea commented Oct 12, 2023

@ryuhangyeong Maybe we can keep it this way for now?

Copy link
Member

@ryuhangyeong ryuhangyeong left a 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!

@btea
Copy link
Collaborator Author

btea commented Oct 12, 2023

Okay, let's merge this pr first.

@btea btea merged commit e0f4761 into dev Oct 12, 2023
10 checks passed
@btea btea deleted the docs/feat-view-transition branch October 12, 2023 13:33
@element-bot element-bot mentioned this pull request Oct 13, 2023
3 tasks
cc-hearts pushed a commit to cc-hearts/element-plus that referenced this pull request Oct 15, 2023
)

* feat(docs): theme switch use startViewTransition api

* chore: format

* feat: update
consultation-applio pushed a commit to consultation-applio/element-plus that referenced this pull request Nov 10, 2023
)

* feat(docs): theme switch use startViewTransition api

* chore: format

* feat: update
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CommitMessage::Qualified Qualified commit message
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants