Skip to content

feat(react): replace react-transition-group with custom useTransition hook#66

Merged
wangdicoder merged 4 commits intomasterfrom
remove-css-transaction-group-lib
Mar 21, 2026
Merged

feat(react): replace react-transition-group with custom useTransition hook#66
wangdicoder merged 4 commits intomasterfrom
remove-css-transaction-group-lib

Conversation

@wangdicoder
Copy link
Owner

@wangdicoder wangdicoder commented Mar 21, 2026

Summary

  • Replace react-transition-group dependency with a lightweight custom useTransition hook and updated Transition component
  • The hook implements a CSS class-toggling state machine (enterenteringenteredexitexitingexited) using requestAnimationFrame and transitionend events
  • Zero SCSS changes required — all existing animation classes (-enter, -enter-active, -enter-done, -exit, -exit-active, -exit-done) are preserved
  • Migrated all direct CSSTransition consumers (Overlay, Modal, Drawer, Message) to use the Transition component
  • Replaced TransitionGroup usage in the new Waterfall component with manual exiting-item tracking
  • Removes unmaintained dependency and prepares for React 19 compatibility (findDOMNode removal)

Release

  • Bump: minor
  • Affected packages: @tiny-design/react (fixed version group includes @tiny-design/tokens and @tiny-design/icons)

Test plan

  • All 91 test suites pass (535 tests)
  • Build succeeds with no react-transition-group references in output
  • Manually verify animations in docs site:
    • Popup/Tooltip/Dropdown: zoom animations on hover/click
    • Modal: slide/scale open and close animations
    • Drawer: slide from each direction (open and close)
    • Message: fade-slide toast appearance and dismissal
    • Alert: close animation
    • Form: error message slide-down
    • Waterfall: item exit fade animation
    • Collapse/Tree/Menu: expand/collapse (unchanged, sanity check)

🤖 Generated with Claude Code

@wangdicoder wangdicoder merged commit 2d3e756 into master Mar 21, 2026
1 check passed
@github-actions github-actions bot mentioned this pull request Mar 21, 2026
@wangdicoder wangdicoder deleted the remove-css-transaction-group-lib branch March 22, 2026 10:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant