[Copilot]

Description

Replaces the two-class CSS toggle pattern for entry animation with the native @starting-style at-rule, enabling pure-CSS entry transitions without JavaScript class management or external animation libraries.

Solution

Before — required two classes and toggling between them:

.CustomModalTransition {
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.1, 1.39);
  transform: scale(0); /* initial state baked into the base class */
}
.CustomModalTransitionOpen {
  transform: scale(1); /* had to apply this class on open */
}

After — single class; browser handles the initial state automatically:

.CustomModalTransition {
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.1, 1.39);
  transform: scale(1); /* resting/final state */
}

@starting-style {
  .CustomModalTransition {
    transform: scale(0); /* applied by the browser before first paint */
  }
}

• src/main.module.css — removed .CustomModalTransitionOpen; resting state defined in .CustomModalTransition; initial state moved into @starting-style block.
• src/main.tsx — applies .CustomModalTransition on the demo ModalContent to exercise the animation.
• README.md — full example updated to show @starting-style CSS approach; drops the @wethegit/react-hooks / useAnimatePresence dependency from the example entirely.
• .stylelintrc — adds @starting-style to at-rule-no-unknown ignore list.

Additional Notes

Browser support: @starting-style is supported in Chrome 117+, Firefox 129+, and Safari 17.5+. Not supported in older browsers — animations will simply not play (graceful degradation; the modal still functions correctly).

Screenshots

N/A

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Update to use @starting-style for entry animation</issue_title>
<issue_description>https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Update to use @starting-style for entry animation #129

---

📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.

[changeset-bot]

🦋 Changeset detected

Latest commit: acc94e5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@wethegit/react-modal	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[marlonmarcello]

@copilot rebase this from copilot/update-dialog-element-showmodal, make the necessary fixes and adjustments

[marlonmarcello]

@copilot rebase from main

[Copilot]

🟡 Changes recommended

The demo content becomes transparent immediately on close, hiding its intended scale-down exit animation.

1 open issue

• Animate opacity to preserve the modal exit transition · New

What changed in this PR

Updates modal animations to use native CSS @starting-style and keeps dialogs mounted to support CSS exit transitions.

Changes:

• Adds optional isOpen control and makes renderTo optional on Modal.
• Updates demos and documentation to use mounted dialogs with CSS transitions.
• Allows @starting-style in Stylelint.

File	Description
src/​main.tsx	Keeps demo dialogs mounted and passes their open state.
src/​main.module.css	Adds entry styles and dialog exit transitions.
src/​lib/​components/​modal/​modal.tsx	Supports controlled opening and closing through isOpen.
README.md	Documents mounted-dialog usage and CSS animation examples.
.stylelintrc	Allows the @starting-style at-rule.

_{Review effort: Balanced}

[marlonmarcello]

@copilot make sure to run the script for the changeset and tag this as minor

[Copilot]

@copilot make sure to run the script for the changeset and tag this as minor

Ran the Changesets script and added a minor changeset in 014aa13.

[marlonmarcello]

@copilot rebase from main and address the conflict and versioning

[Copilot]

@copilot rebase from main and address the conflict and versioning

Merged main and verified both minor changesets resolve to one package minor bump. Merge commit: ff57956.

[NicholasLancey]

PR looks good to me @marlonmarcello. This is an awesome use of vanilla CSS transitions rather than a hook. And agreed with keeping the modal mounted, dialog is hidden when closed so no need to remove it!

[marlonmarcello]

@copilot do one final rebase from main with the new updated packages and release CI and fix the confilcts

[Copilot]

@copilot do one final rebase from main with the new updated packages and release CI and fix the confilcts

Merged the latest main (including release CI and the 4.1.0 versioning commit) without conflicts. The feature changeset remains a valid minor bump. Merge commit: 0eaedd6. Build and style lint pass; script lint retains the existing setBody effect error.

[marlonmarcello]

@copilot fix the linting issue

[Copilot]

@copilot fix the linting issue

Fixed the lint issue in 3e54... by removing the effect/state update and passing document.body directly. npm run lint and npm run build pass.