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.

Sign up for GitHub

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

Jump to bottom

bug(material/slide-toggle): Animation duration in M3 should be 300ms #28916

Open
1 task
diesieben07 opened this issue Apr 19, 2024 · 1 comment · May be fixed by #29441
Open
1 task

bug(material/slide-toggle): Animation duration in M3 should be 300ms #28916

diesieben07 opened this issue Apr 19, 2024 · 1 comment · May be fixed by #29441
Labels
area: material/slide-toggle M3 P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@diesieben07
Copy link

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The Slide toggle animation with an M3 theme uses the same duration and timing function as the M2 slide toggle. For the M3 switch this looks jarring and unfitting.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-andwku?file=src%2Fmain.ts
Steps to reproduce:

  1. Look at the toggle animation
  2. Compare with the toggle animation used in Material Web: https://material-web.dev/components/switch/stories/

Expected Behavior

The slide toggle animation should not be jarring when using an M3 theme.

Actual Behavior

The slide toggle animation uses the short animation duration from M2 and appears jarring.

Environment

  • Angular: 17.3.5
  • CDK/Material: 17.3.5
@diesieben07 diesieben07 added the needs triage This issue needs to be triaged by the team label Apr 19, 2024
@crisbeto
Copy link
Member

cc @wagnermaciel

@wagnermaciel wagnermaciel changed the title bug(Slide toggle): Slide toggle animation in M3 theme does not match Material Web and looks jarring bug(material/slide-toggle): Animation duration in M3 should be 300ms Apr 19, 2024
@wagnermaciel wagnermaciel added P2 The issue is important to a large percentage of users, with a workaround area: material/slide-toggle M3 and removed needs triage This issue needs to be triaged by the team labels Apr 19, 2024
GiftLanga added a commit to GiftLanga/angular-components that referenced this issue Jul 16, 2024
@GiftLanga
fix(material/slide-toggle): Increase slide-toggle transition time
1ec8af2 
Increases the animation transition time to 300ms

Fixes angular#28916
@GiftLanga GiftLanga linked a pull request Jul 16, 2024 that will close this issue
Open
GiftLanga added a commit to GiftLanga/angular-components that referenced this issue Jul 18, 2024
@GiftLanga
fix(material/slide-toggle): Increase slide-toggle transition time
24e9efa 
Increases the animation transition time to 300ms

Fixes angular#28916
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed P2 The issue is important to a large percentage of users, with a workaround labels Sep 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: material/slide-toggle M3 P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(material/slide-toggle): Increase slide-toggle transition time GiftLanga/angular-components
3 participants
@diesieben07 @crisbeto @wagnermaciel