Page MenuHomePhabricator

[landing] animate the keyserver faq section
ClosedPublic

Authored by ginsu on Jun 5 2023, 1:01 PM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Mar 27, 11:54 PM
Unknown Object (File)
Mar 5 2024, 9:23 PM
Unknown Object (File)
Mar 5 2024, 9:23 PM
Unknown Object (File)
Mar 4 2024, 11:29 PM
Unknown Object (File)
Mar 4 2024, 3:00 AM
Unknown Object (File)
Feb 10 2024, 2:49 PM
Unknown Object (File)
Feb 10 2024, 2:48 PM
Unknown Object (File)
Feb 10 2024, 2:48 PM
Subscribers

Details

Summary

This diff is the second part to the introduction of the keyserver faq section. The focus of this diff is animating the answers to slide in with an accordion like animation. When I first built this, I ran into the issue where I couldn't add a transition with auto. Since we need an explicit value to to make this transition, I initially thought the best way to go about animating this was to calculate the height using JS. However, after further research I found a much more elegant way to achieve the same effect using grid

Sources:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#specifications
https://carlanderson.xyz/how-to-animate-on-height-auto/
https://keithjgrant.com/posts/2023/04/transitioning-to-height-auto/
https://www.youtube.com/watch?v=B_n4YONte5A

Depends on D8093

Test Plan

Please see the demo video below:

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ginsu published this revision for review.Jun 5 2023, 1:04 PM
ginsu edited the summary of this revision. (Show Details)
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, kamil.
ginsu planned changes to this revision.Jun 5 2023, 2:50 PM

want to do a second pass through

landing/keyserver-faq.react.js
70 ↗(On Diff #27446)

React.useCallback

simply animation using grid

ginsu edited the test plan for this revision. (Show Details)
This revision is now accepted and ready to land.Jun 6 2023, 12:47 PM
This revision was landed with ongoing or failed builds.Aug 8 2023, 2:09 PM
This revision was automatically updated to reflect the committed changes.