ywana-core8 0.1.61 → 0.1.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/site/site.css

@@ -121,30 +121,18 @@
 .site-page-container {
     position: relative;
     transition: all 0.3s ease;
+    opacity: 1;
+    transform: translateX(0);
 }
 
-/* Cuando una página sale */
 .site-page-container.page-out {
     opacity: 0;
     transform: translateX(-30px);
 }
 
-/* Cuando una página entra */
 .site-page-container.page-in {
-    opacity: 0;
-    transform: translateX(30px);
-    animation: pageIn 0.3s forwards;
-}
-
-@keyframes pageIn {
-    from {
-        opacity: 0;
-        transform: translateX(30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
+    opacity: 1;
+    transform: translateX(0);
 }
 
 .site6>main {

package/src/site/site.js

@@ -253,13 +253,12 @@ const SiteMenu = ({ iconSrc, title, children, min }) => {
  * SitePage
  */
 const SitePage = ({ children, init }) => {
-
     const context = useContext(SiteContext)
     const { page } = context
-    
-    const [renderedPage, setRenderedPage] = useState(page)
-    const [transitionClass, setTransitionClass] = useState('')
-    
+
+    const [displayedPage, setDisplayedPage] = useState(page)
+    const [isExiting, setIsExiting] = useState(false)
+
     useEffect(() => {
         if (init) {
             context.goto(init)
@@ -269,23 +268,25 @@ const SitePage = ({ children, init }) => {
     }, [])
 
     useEffect(() => {
-        if (page !== renderedPage) {
-            setTransitionClass(`page-out`)
-            setTimeout(() => {
-                setTransitionClass(`page-in`)
-                setRenderedPage(page)
-                setTimeout(() => { 
-                    setTransitionClass('')
-                }, 300)
+        if (page !== displayedPage) {
+            setIsExiting(true)
+
+            // Esperamos a que la animación de salida termine
+            const timeout = setTimeout(() => {
+                setDisplayedPage(page)
+                setIsExiting(false)
             }, 300)
-            setRenderedPage(page)
+
+            return () => clearTimeout(timeout)
         }
     }, [page])
 
-    const currentPage = Children.toArray(children).filter(child => child.props ? child.props.id === renderedPage : false)
+    const allChildren = React.Children.toArray(children)
+    const current = allChildren.find(child => child.props?.id === displayedPage)
+
     return (
-        <main className={`site-page-container ${transitionClass}`}>
-            {currentPage}
+        <main className={`site-page-container ${isExiting ? 'page-out' : 'page-in'}`}>
+            {current}
         </main>
     )
 }