14. Transiciones

Versión para imprimir.

A. Transiciones 1

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

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>Transiciones 1</title>
10
11 <style>
12 menu {
13 display: flex;
14 /* Centra verticalmente el
15 * contenido cuando solo tiene
16 * 1 renglón. */
17 align-items: center;
18 flex-wrap: wrap;
19 align-content: center;
20 /* Centra horizontalmente el
21 * contenido cuando hay varios
22 * renglones. */
23 justify-content: center;
24 list-style-type: none;
25 /* Espacio vertical y horizontal
26 * entre elementos. */
27 gap: 0.5rem;
28 padding: 0;
29 margin: 0;
30 }
31
32 #sonrisa {
33 /* Aumenta el tamaño de letra a
34 * 5 renglones de texto normal.
35 */
36 font-size: 5rem;
37 /* El ancho es el mínimo
38 * necesario para mostrar el
39 * contenido. */
40 width: fit-content;
41 margin: 1rem auto;
42 /* El cursor del ratón es una
43 * mano apuntando. */
44 cursor: pointer;
45 /* Este elemento cambia
46 * lentamente cuando se cambia
47 * la propiedad transform. */
48 transition-property: transform;
49 /* El cambia dura 0.5s. */
50 transition-duration: 0.5s;
51 }
52
53 /* La sonrisa gira media vuelta
54 * cuando se cliquea. */
55 #sonrisa:active {
56 transform: rotate(0.5turn);
57 }
58
59 /* La sonrisa gira 80% de vuelta
60 * cuando tiene la clase gira. */
61 #sonrisa.gira {
62 transform: rotate(0.8turn);
63 }
64 </style>
65
66</head>
67
68<body>
69
70 <menu>
71 <li>
72 <h1>Transiciones 1</h1>
73 </li>
74 <li>
75 <!-- Botón que agrega la clase
76 gira a la sonrise. -->
77 <button type="button"
78 onclick="sonrisa.classList
79 .add('gira')">
80 Gira
81 </button>
82 </li>
83 <li>
84 <!-- Botón que quita la clase
85 gira a la sonrise. -->
86 <button type="button"
87 onclick="sonrisa.classList
88 .remove('gira')">
89 Regresa
90 </button>
91 </li>
92 </menu>
93
94 <figure id="sonrisa">😁</figure>
95
96</body>
97
98</html>

B. Transiciones 2

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

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>Transiciones 2</title>
10
11 <style>
12 menu {
13 display: flex;
14 align-items: center;
15 flex-wrap: wrap;
16 align-content: center;
17 list-style-type: none;
18 gap: 0.5rem;
19 padding: 0;
20 margin: 0;
21 }
22
23 #hamburguesa {
24 /* La hamburguesa se usará como
25 * referencia para posicionar
26 * elementos usando el nombre
27 * --hamburguesa. */
28 anchor-name: --hamburguesa;
29 }
30
31 #navGeneral {
32 position: absolute;
33 /* Indica la referencia para
34 * posicionar este elemento. */
35 position-anchor: --hamburguesa;
36 top: 3.5rem;
37 top: anchor(bottom);
38 left: 0.5rem;
39 left: anchor(left);
40 margin: unset;
41 /* Originalmente el elemento
42 * está desplazado hacia arriba
43 * a un 50% de su tamaño y
44 * contraido totalmente en su
45 * dimensión vertical. Cuando se
46 * reduce, cierra en el centro;
47 * por eso hay que desplazarlo. */
48 transform:
49 translateY(-50%) scaleY(0);
50 /* Este elemento cambia
51 * lentamente cuando se cambian
52 * las propiedades overlay,
53 * display y transform.
54 * por ser un popover,
55 * automáticamente el display se
56 * mantiene cerrado y fuera de
57 * la capa de overlay. */
58 transition-property:
59 overlay, display, transform;
60 /* Permite trabajar cin las
61 * propiedades que cambian
62 * abruptamente como overlay,
63 * y display. */
64 transition-behavior:
65 allow-discrete;
66 transition-duration: 1s;
67 }
68
69 /* Cuando el popover se abre,
70 * se elimina el desplazado
71 * hacia arriba y la
72 * constracción vertical. */
73 #navGeneral:popover-open {
74 transform: translateY(0);
75 }
76
77 /* Reglas para iniciar las
78 * propiedades que cambian
79 * abruptamente. */
80 @starting-style {
81
82 /* Al empezar a abrir, el
83 * popover se mantiene arriba y
84 * cerrado. Automáticamente pone
85 * display block y se pasa a la
86 * capa de overlay. */
87 #navGeneral:popover-open {
88 transform:
89 translateY(-50%) scaleY(0);
90 }
91
92 }
93 </style>
94
95</head>
96
97<body>
98
99 <menu>
100 <li>
101 <button type="button"
102 id="hamburguesa"
103 popovertarget="navGeneral">
104 ≡
105 </button>
106 </li>
107 <li>
108 <h1>Transiciones 2</h1>
109 </li>
110 </menu>
111
112 <nav popover="auto"
113 id="navGeneral">
114 <h2>Enlaces externos</h2>
115 <ul>
116 <li>
117 <p>
118 <a target="_blank"
119 rel="noreferrer"
120 href="https://savethecat.com/">
121 Salvar al gato.
122 </a>
123 </p>
124 </li>
125 <li>
126 <p>
127 <a target="_blank"
128 rel="noreferrer"
129 href="https://www.showrunner.xyz/">
130 Showrunner
131 </a>
132 </p>
133 </li>
134 <li>
135 <p>
136 <a target="_blank"
137 rel="noreferrer"
138 href="https://google.com/">
139 Google
140 </a>
141 </p>
142 </li>
143 </ul>
144 </nav>
145
146 <p>Hola</p>
147</body>
148
149</html>

C. Resumen