A. Single page applications 1

Salida


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<meta name="viewport"
8	content="width=device-width">
9	<title>
10	Single Page Application 1
11	</title>
12
13	<style>
14	nav {
15	display: flex;
16	align-items: center;
17	flex-wrap: wrap;
18	align-content: center;
19	list-style-type: none;
20	gap: 0.5rem;
21	}
22
23	@keyframes aparece {
24
25	/* La animación parte de
26	* opacidad 0 y automáticamente
27	* llega al default que es 1. */
28	from {
29	opacity: 0;
30	}
31	}
32
33	@keyframes desvanece {
34
35	/* La animación parte
36	* automáticamente del default
37	* de opacidad que es 1 y llega
38	* a 0. */
39	to {
40	opacity: 0;
41	}
42	}
43
44	/* Al terminar una vista, corre
45	* una animación sobre el
46	* elemento con
47	* view-transition-name: root,
48	* que por default es el tipo
49	* html. */
50	::view-transition-old(root) {
51	animation-name: desvanece;
52	animation-duration: 1s;
53	}
54
55	/* Al iniciar la transición a
56	* una vista nueva, corre una
57	* animación sobre el elemento
58	* con
59	* view-transition-name: root,
60	* que por default es el tipo
61	* html. */
62	::view-transition-new(root) {
63	animation-name: aparece;
64	/* Espera 1s antes de iniciar la
65	* animación, para permitir que
66	* la vista anterior se
67	* desvanezca. */
68	animation-delay: 1s;
69	animation-duration: 2s;
70	}
71	</style>
72
73	</head>
74
75	<body>
76
77	<nav>
78	<a href="inicio">Inicio</a>
79	<a href="acercade">Acerca de</a>
80	<a href="contacto">Contacto</a>
81	</nav>
82
83	<main id="inicio">
84	<h1>
85	Single Page Application 1
86	</h1>
87	<p>
88	Esta es la página principal.
89	</p>
90	</main>
91
92	<main id="acercade" hidden>
93	<h1>Acerca de</h1>
94	<p>
95	Esta es la página Acerca de.
96	</p>
97	</main>
98
99	<main id="contacto" hidden>
100	<h1>Contacto</h1>
101	<p>
102	Esta es la página Contacto.
103	</p>
104	</main>
105
106	<footer>
107	<p>
108	© 2025
109	Gilberto Pacheco Gallegos.
110	</p>
111	</footer>
112
113	<script>
114
115	// https://www.w3.org/TR/css-view-transitions-1/
116	const titulos = new Map([
117	[
118	"inicio",
119	"Single Page Application 1"
120	],
121	[
122	"acercade",
123	"Acerca de - Single Page Application 1"
124	],
125	[
126	"contacto",
127	"Contacto - Single Page Application 1"
128	],
129	])
130
131	const vistas =
132	[inicio, acercade, contacto]
133
134	/* Al cliquear detecta si es
135	* sobre un enlace y en este caso
136	* evita el salto a otra página
137	* y muestra la vista
138	* seleccionada.
139	*/
140	document.addEventListener(
141	"click",
142	event => {
143	event.preventDefault()
144	const target = event.target
145	if (
146	target instanceof HTMLAnchorElement
147	) {
148	try {
149	const href = target.href
150	/* Se queda con el nombre de
151	* la vista. */
152	const estado =
153	href.substring(
154	href.lastIndexOf("/") + 1
155	)
156	transicion(estado)
157	/* Agrega una nueva posición
158	* en la historia del
159	* navegador, simulando una
160	* nueva página, usando el
161	* valor de estado para
162	* actualizar correctamente
163	* la página. */
164	history.pushState(
165	estado, "", location.href
166	)
167	} catch (err) {
168	console.error(err)
169	}
170	}
171	}
172	)
173
174	/* Maneja los botones de avanzar
175	* o retroceder en la historia,
176	* recuperando el estado para
177	* actualizar la página. */
178	window.addEventListener(
179	"popstate",
180	event => {
181	if (
182	typeof event.state === "string"
183	) {
184	transicion(event.state)
185	}
186	}
187	)
188
189	history.replaceState(
190	"inicio", "", location.href
191	)
192
193	/**
194	* @param {string} estado
195	*/
196	function muestraVista(estado) {
197	document.title =
198	titulos.get(estado) ?? ""
199	for (const vista of vistas) {
200	vista.hidden =
201	estado !== vista.id
202	}
203	}
204
205	/**
206	* Si el navegador tiene soporte
207	* para view tansitions, realiza
208	* la transición; de lo
209	* contrario, solo hace el cambio
210	* de vista.
211	* @param {string} estado
212	*/
213	function transicion(estado) {
214	if (
215	typeof document.startViewTransition === "function"
216	) {
217	document.startViewTransition(
218	() => muestraVista(estado)
219	)
220	} else {
221	muestraVista(estado)
222	}
223	}
224
225	</script>
226
227	</body>
228
229	</html>

skip_previous skip_next