HomePhabricator
Diffusion Comm 05fce799b065

[landing] animate the keyserver faq section

Description

[landing] animate the keyserver faq section

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:

Reviewers: atul, kamil

Reviewed By: atul

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D8095

Details

Provenance
ginsuAuthored on Jun 5 2023, 11:16 AM
Reviewer
atul
Differential Revision
D8095: [landing] animate the keyserver faq section
Parents
rCOMMaa01c0500382: [landing] introduce keyserver faq component
Branches
Unknown
Tags
Unknown