natxocc/sigpro
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Router transition

Browse Source
This commit is contained in:
natxocc
2026-04-06 19:05:13 +02:00
parent bf3069d439
commit 9666c3d034
7 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/api/router.md
View File

@@ -19,7 +19,7 @@ Router(routes: Route[]): HTMLElement
## Usage Patterns
### 1. Defining Routes
The `Router` returns a `div` element with the class `.router-outlet`. When the hash changes, the router destroys the previous view and mounts the new one inside this container.
The `Router` returns a `div` element with the class `.router-transition`. When the hash changes, the router destroys the previous view and mounts the new one inside this container.
```javascript
const App = () => Div({ class: "app-layout" }, [
@@ -79,11 +79,11 @@ Watch(() => {
---
## Styling the Outlet
The router returns a standard `div` with the `.router-outlet` class. You can easily style it or add transitions:
## Styling the transition of Router
The router returns a standard `div` with the `.router-transition` class. You can easily style it or add transitions:
```css
.router-outlet {
.router-transition {
display: block;
min-height: 100vh;
animation: fadeIn 0.3s ease;

2
docs/sigpro.js
View File

@@ -408,7 +408,7 @@
var Router = (routes) => {
const currentPath = $(window.location.hash.replace(/^#/, "") || "/");
window.addEventListener("hashchange", () => currentPath(window.location.hash.replace(/^#/, "") || "/"));
const outlet = Tag("div", { class: "router-outlet" });
const outlet = Tag("div", { class: "router-transition" });
let currentView = null;
Watch([currentPath], async () => {
const path = currentPath();