5d940b57ef
This commit fixes an issue where the card's header would improperly
expand to full height during card collapse, leading to a less smooth
user experience. Previously, this was caused by the indiscriminate use
of `transition: all` in the `.card__expander`, which included unwanted
properties in the transition during collapse, such as height. This is
solved by using Vue transitions to apply transition only during
expansion.
Changes:
- Introduce a new Vue component, `CardExpandAnimation`:
- Centralizes the animation process, applying the same animation to
both the card and its arrow for consistency.
- Resolves the glitch by adjusting classes exclusively during the
enter animation phase, avoiding unintended side effects during leave
animation phase.
- Adopts a Vue-idiomatic approach for transition management, improving
code readability and maintainability.
- Improves separation of concerns by isolating animation logic from
the component's core functionality, facilitating easier updates or
replacements.
- Remove unnecessary transitions to enhance code simplicity and
performance:
- Remove `transition: all` on `.card__expander`, which was identified
as the cause of the issue.
- Remove unnecessary `transition: all` on `.card`.
- Adjust transitions to specifically target and affect the transform
property (instead of `all`) to optimize animation behavior and
eliminate potential side-effects.
These changes not only fix the issue at hand but also contribute to a
more maintainable and performant codebase by clarifying animation logic
and reducing unnecessary CSS transitions.
presentation
See presentation.md