Context
The current FlipCard implementation relies on a JavaScript setTimeout to swap children during the animation. This causes several issues:
-
Flicker/Blanking: Content can disappear if the JS thread is busy.
-
Rigid API: Using an array for children is prone to runtime errors.
-
Theming/Sizing: Difficult to pass dynamic backgrounds or calculate container sizes because the back face is not rendered until the flip occurs.
Proposed Changes
-
Replace array-based children with explicit frontElement and backElement props.
-
Remove setTimeout logic and implement standard CSS rotateY(180deg) with backface-visibility: hidden.
-
Add flipAction prop to support both 'click' and 'hover' interactions.
-
Improve TypeScript safety by removing manual child-index checking.
Context
The current FlipCard implementation relies on a JavaScript setTimeout to swap children during the animation. This causes several issues:
Flicker/Blanking: Content can disappear if the JS thread is busy.
Rigid API: Using an array for children is prone to runtime errors.
Theming/Sizing: Difficult to pass dynamic backgrounds or calculate container sizes because the back face is not rendered until the flip occurs.
Proposed Changes
Replace array-based children with explicit frontElement and backElement props.
Remove setTimeout logic and implement standard CSS rotateY(180deg) with backface-visibility: hidden.
Add flipAction prop to support both 'click' and 'hover' interactions.
Improve TypeScript safety by removing manual child-index checking.