[react-modal] feature: use @starting-style for entry animation

.stylelintrc

@@ -8,6 +8,7 @@
   ],
   "plugins": ["stylelint-selector-bem-pattern"],
   "rules": {
+    "at-rule-no-unknown": [true, { "ignoreAtRules": ["starting-style"] }],
     "no-descending-specificity": null,
     "selector-class-pattern": null,
     "plugin/selector-bem-pattern": {

README.md

@@ -101,18 +101,19 @@ function MyModal() {
 
 Custom transition, focus management and hash-based state management.
 
-Use your favorite animation library, [@wethegit/react-hooks](https://wethegit.github.io/react-hooks/use-animate-presence) provides a simple one for these cases.
+The [`@starting-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style) CSS at-rule lets you define entry animations with pure CSS — no extra JavaScript or animation libraries needed.
 
 ```jsx
 import { useRef } from 'react'
-import { useAnimatePresence } from '@wethegit/react-hooks'
 import {
   Modal,
   ModalContent,
   ModalBackdrop,
   useModal
 } from "@wethegit/react-modal"
 
+import styles from "./my-styles.module.css"
+
 function MyModal() {
   const triggerButton = useRef(null)
   const modalRootRef = useRef(null)
@@ -124,27 +125,17 @@ function MyModal() {
     hash: "modal-with-hash",
   })
 
-  const { render, animate } = useAnimatePresence({
-    isVisible: isOpen,
-    duration: 800
-  })
-
   return (
     <>
       <button ref={triggerButton} onClick={toggle}>
         Open the modal window!
       </button>
       <div ref={modalRootRef}></div>
 
-      {render && modalRootRef.current && (
-        <Modal 
-          renderTo={modalRootRef.current}
-          style={{
-          transition: `opacity 800ms ease-in-out`,
-          opacity: animate ? 1 : 0
-        }}>
+      {isOpen && modalRootRef.current && (
+        <Modal renderTo={modalRootRef.current}>
           <ModalBackdrop onClick={toggle} />
-          <ModalContent>
+          <ModalContent className={styles.modal}>
             <button onClick={toggle}>
               Close
             </button>
@@ -157,6 +148,22 @@ function MyModal() {
 }
 ```
 
+```css
+/* my-styles.module.css */
+.modal {
+  transition: opacity 0.5s ease, transform 0.5s ease;
+  opacity: 1;
+  transform: scale(1);
+}
+
+@starting-style {
+  .modal {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+```
+
 ## Props
 
 ### `<Modal>`

src/main.module.css

@@ -22,14 +22,14 @@
 }
 
 .CustomModalTransition {
-  transition: transform var(--transition-duration)
-    var(--ease, cubic-bezier(0.77, 0, 0.1, 1.39));
-  transform: scale(var(--scale, 0));
+  transition: transform 0.5s cubic-bezier(0.77, 0, 0.1, 1.39);
+  transform: scale(1);
 }
 
-.CustomModalTransitionOpen {
-  --ease: cubic-bezier(0.77, 0, 0.1, 1.39);
-  --scale: 1;
+@starting-style {
+  .CustomModalTransition {
+    transform: scale(0);
+  }
 }
 
 .CustomModalAbsolute {

src/main.tsx

@@ -24,7 +24,12 @@ function CustomModal() {
       {isOpen && modalRootRef.current && (
         <Modal renderTo={modalRootRef.current}>
           <ModalBackdrop onClick={toggle} className={styles.CustomModalOverlay} />
-          <ModalContent className={classnames([styles.CustomModalContent])}>
+          <ModalContent
+            className={classnames([
+              styles.CustomModalContent,
+              styles.CustomModalTransition,
+            ])}
+          >
             <button onClick={toggle} className={styles.CustomModalClose}>
               Close
             </button>