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

[List vNext] Add animation to expand/collapse trigger #702

Merged
merged 3 commits into from
Sep 18, 2021

Conversation

sophialee0416
Copy link
Contributor

@sophialee0416 sophialee0416 commented Sep 3, 2021

Platforms Impacted

  • iOS
  • macOS

Description of changes

List expand/collapse did not have an animation when triggered externally. This fix changes that so the list is able to animate expand/collapse smoothly.

Verification

Before After
ezgif com-video-to-gif-3 ezgif com-video-to-gif

Pull request checklist

This PR has considered:

  • Light and Dark appearances
  • VoiceOver and Keyboard Accessibility
  • Internationalization and Right to Left layouts
  • Different resolutions (1x, 2x, 3x)
  • Size classes and window sizes (iPhone vs iPad, notched devices, multitasking, different window sizes, etc)
Microsoft Reviewers: Open in CodeFlow

@sophialee0416 sophialee0416 requested a review from a team as a code owner September 3, 2021 18:06
Copy link
Contributor

@mischreiber mischreiber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couple thoughts from the animation:

  • It looks like the list of status items are still disappearing without animation, even though the list is collapsing smoothly. It's definitely an improvement, but not quite as complete as the expand animation (where the status items fade in from 0). Anything we can do about that?
  • If you watch closely when "Busy" becomes "Available", you can see that the frame for the "Available" text is animating too, giving the impression that it's writing the word character by character. Can we suppress that part of the animation?

Overall I think it's an improvement over what we currently have, but if we can make these two additional changes then it'll be flawless.

@sophialee0416
Copy link
Contributor Author

Couple thoughts from the animation:

  • It looks like the list of status items are still disappearing without animation, even though the list is collapsing smoothly. It's definitely an improvement, but not quite as complete as the expand animation (where the status items fade in from 0). Anything we can do about that?
  • If you watch closely when "Busy" becomes "Available", you can see that the frame for the "Available" text is animating too, giving the impression that it's writing the word character by character. Can we suppress that part of the animation?

Overall I think it's an improvement over what we currently have, but if we can make these two additional changes then it'll be flawless.

Good eye! Thanks for the catch. I will look into that further!

@sophialee0416 sophialee0416 added the vnext-prototype Changes meant to be merged to the vnext-prototype branch. label Sep 3, 2021
ios/FluentUI/Vnext/List/List.swift Outdated Show resolved Hide resolved
@sophialee0416 sophialee0416 merged commit edb54c8 into microsoft:vnext-prototype Sep 18, 2021
@sophialee0416 sophialee0416 deleted the listExpand branch October 6, 2021 06:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vnext-prototype Changes meant to be merged to the vnext-prototype branch.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants