ywana-core8 0.1.59 → 0.1.60

package/package.json

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

package/src/site/site.css

@@ -119,8 +119,32 @@
 }
 
 .site-page-container {
-    position:relative;
-    overflow: hidden;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+/* 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);
+    }
 }
 
 .site6>main {

package/src/site/site.js

@@ -253,8 +253,13 @@ 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('')
+    
     useEffect(() => {
         if (init) {
             context.goto(init)
@@ -262,9 +267,25 @@ const SitePage = ({ children, init }) => {
             context.goto("EMPTY")
         }
     }, [])
+
+    useEffect(() => {
+        if (page !== renderedPage) {
+            setTransitionClass(`page-out-${context.direction}`)
+            setTimeout(() => {
+                setTransitionClass(`page-in-${context.direction}`)
+                setRenderedPage(page)
+                setTimeout(() => { 
+                    setTransitionClass('')
+                }, 300)
+            }, 300)
+            setRenderedPage(page)
+        }
+    }, [page])
+
+    const currentPage = Children.toArray(children).filter(child => child.props ? child.props.id === renderedPage : false)
     return (
-        <main>
-            {React.Children.toArray(children).filter(child => child.props ? child.props.id === page : false)}
+        <main className={`site-page-container ${transitionClass}`}>
+            {currentPage}
         </main>
     )
 }