Fijaos en esta animación. ¿Cómo creéis que está hecha esta animación?
¿Está utilizando JavaScript? ¿Creéis que está utilizando JavaScript?
¿Son muchas líneas de CSS? ¿Es complicado?
Os voy a explicar una novedad que viene a CSS.
Bueno, viene no, es que ya tiene un soporte de más del 80%.
O sea, tú estás ahí sentado, tú no lo sabías y resulta que CSS ha añadido
una novedad tremenda, tremenda, que te va a permitir hacer este tipo de animaciones.
¿Y por qué esta novedad? ¿Esto se podía hacer antes? ¿No se podía hacer antes?
Vale, esto se podía hacer antes, pero para que quedase exactamente igual
había que utilizar un poquito de JavaScript.
Os voy a enseñar un poco el código para que lo veamos.
Nosotros, si estamos aquí en este proyecto y le voy a poner un poquito de CSS,
lo que uno podría pensar es, vale, fijaos que ahora no tiene la animación.
Ahora la animación no la tiene. Voy a quitar el HTML.
Al final es un dialog que dentro tiene el contenido de la modal
y dentro un formulario para cerrar la modal y ya está.
Y un botón para abrir la modal. Vamos a quitar el HTML, que no es muy necesario.
Vamos a poner esto por aquí. El JavaScript este es solo para abrir la modal.
No tiene mucha historia. Vamos a centrarnos en el HTML.
Abrir la modal. Aparece el contenido de la modal.
Fijaos que ahora no tenemos ningún tipo de animación.
Si yo le digo, oye, esta modal, bueno, el dialog, cuando esté abierto,
quiero que me pongan la escala 1 y que hagas una transición de la escala
durante 300 milisegundos y que me hagas ease, ¿no?
Que vaya un poquito más rápido al principio y al final, ¿vale?
Vamos, ease in, out.
Pues ahora tampoco tiene la animación.
¿Y por qué no tiene la animación?
¿Por qué no funciona la animación?
No funciona la animación porque el estilo al iniciar la animación
ya es este por defecto.
Entonces, ¿qué animación se supone que tiene que hacer?
Si es que no es capaz, como ya nada más entrar ya tiene este estilo,
es imposible que nos muestre una animación, una transición
entre el estado inicial y el estado final,
porque directamente ya le estamos indicando cuál tiene que ser su estilo,
nada más aparecer.
Para poder hacer una transición, vamos a utilizar una nueva regla
que hay en CSS, y esta es una de las novedades,
que se llama Starting Style.
Y lo que estamos haciendo aquí, fíjate que estamos dentro del Dialog Open,
le estamos diciendo que tiene un estilo con el que va a iniciar
y el estilo con el que inicia, le podemos decir que sea cero.
Y ahora, fíjate, ¿qué es lo que está pasando aquí?
Le estamos diciendo que el estilo inicial de este elemento,
cuando se tiene que mostrar, es que su escala es cero
y por lo tanto, desde este estilo inicial hasta el estilo
que tenemos que hacer la transición, va a hacer esto.
Perfectamente.
O sea, que ahora, solo con este CSS,
fijaos, solo con este CSS lo que hemos conseguido, ¿vale?
Madre mía, no nos habremos peleado con esto durante años.
Lo mejor de todo es que el soporte que tenemos
es que todos los navegadores modernos ya soportan Starting Style.
Fíjate que solo Firefox tiene un pequeño pero
y es que todavía no soporta la animación de la propiedad Display None.
Porque fijaos que el Display None también lo podríamos animar.
De Display None a Display Block, o sea, para hacer desaparecer un elemento del todo.
Y ahora lo veremos, ¿vale?
82% de soporte que tiene.
Una cosa que me ha dado bastante pena, esto, fijaos en esto, ¿eh?
Esto es como un poquito para llorar.
Y es que cuando he visto esto, pone 0,01.
Solo un 0,01 está con el, o sea, de Firefox.
Pero esto significa que Firefox, o sea, Firefox, aquí donde lo veis,
tiene, en global, tiene solo una cuota de mercado, según Can I Use, del 2,29%.
Y la última versión, que es la 129, un 0,01.
O sea, es que cada vez, tiene cada vez menos y menos cuota de mercado, ¿eh?
Me ha dado bastante pena cuando lo he visto porque me he quedado alucinando.
Es verdad que la actual es la 128, ¿vale?
Que es la que tiene más 128.
Pero, wow, aún así, está bajando muy rápido, ¿eh?
Muy, muy rápido.
Bueno, total, un 82%.
A las malas, ¿qué es lo que pasaría?
Que si no soporta esto, pues no vería la animación y ya está.
Igualmente, todavía falta algo.
Porque cuando lo abro, aparece la animación,
pero cuando lo cierro, no aparece la animación.
Y también se puede hacer la animación de salida.
Esta sería la animación de entrada, que sí que está funcionando.
Y luego tendríamos la animación de salida, que todavía no está funcionando.
Para hacer la animación de salida, lo que podríamos decirles,
mira, esto sería paso 0, estado inicial,
¿vale?
Esto sería el paso 1 al abrirlo, ¿vale?
Y luego tendríamos paso 2, que sería al cerrarlo.
Para eso utilizamos directamente el dialog sin el atributo open.
El atributo open se le pone al elemento cuando lo abrimos.
Lo podemos ver más claramente.
No sé si lo veremos.
Yo creo que sí, que debería estar ahí.
Sí, ¿veis?
Este open indica que el dialog está abierto.
Si yo lo cierro, ¿ves?
Ya no aparece ese atributo.
Esto nos puede ayudar a un montón de cosas, como por ejemplo, para estilarlo, ¿vale?
Pero entonces ahora, para que la animación también aparezca de salida,
vamos a poner aquí un transition, scale 3s, is,
y aquí un scale 0.
Pero esto no va a funcionar.
¿Vale?
¿Por qué no funciona?
Porque cuando nosotros justamente le damos al ok,
lo que está pasando aquí es que lo que hace el navegador es que la modal pasa de display block a display none.
O sea, lo está ocultando directamente.
Y aquí viene la segunda novedad de CSS, que te va a volar la cabeza.
Ahora también podemos animar los displays.
Lo que podemos hacer es decirle aquí que la transición también va a ser display, ¿vale?
300 milisegundos, is, y le decimos que allow discrete, ¿vale?
Este allow discrete lo que nos va a permitir es que aquellas propiedades que no son de animación de tanto porciento,
sino que diríamos que sean más on, off, como por ejemplo display, ¿no?
Display o está o no está, pero no se puede animar.
No es como la opacidad, que sí que tiene valores.
Pues aquí lo que estamos diciendo es, oye, quiero que sea discreto,
porque esto es verdad que no puedes hacer una animación de que pase de block a none,
pero lo que sí que puedes hacer es, hasta que no llegues hasta los 300 milisegundos,
dame ese margen para que sea block todo el rato hasta que llegue el último momento y pase a none.
Y fijaos ahora lo que va a ocurrir.
Que le das aquí y ahora, fíjate que ahora sí que está haciendo la animación.
Ahora sí que está haciendo la animación de que sea chiquitito.
Y ya está.
Ya tenemos la animación de entrada y la de salida.
O sea, tremendo.
Con solo este CSS, con solo este CSS, que obviamente podríais hacer 10.000 millones de cosas.
Podéis hacer, yo que sé, que esté, a ver si ponemos aquí, que esté más abajo.
Que además también tenga la opacidad a cero.
O sea, es que lo podéis hacer todo, todo, todo.
Podéis hacer lo que os dé la gana, podéis hacer lo que queráis.
Es increíble.
Está muy bien porque al final, no sé si esto sería translate o transform.
Vamos a intentar así.
Y vamos a poner aquí translate, cero píxel, cero píxel.
Y en un momento, claro, la escala queda un poco rara.
Queda un poco rara la escala.
Pero en un momento, la opacidad aquí, ponemos uno.
Opacidad, uno.
Y en un momento, aquí la he liado.
A ver, opacidad, opacidad.
Bueno, algo, algo he liado.
Opacidad, no, estaba bien.
La opacidad, opacidad, opacity, debería ser uno aquí.
No sé si es porque alguno de los que he puesto el translate y tal no funciona.
Pero bueno, con algo así, podríais hacer también que sea la opacidad,
que lo podéis hacer solo el movimiento.
Podéis hacer lo que os dé la gana.
Y lo mismo también, obviamente, pues para salir, ¿vale?
Haríais lo mismo.
Ah, aquí es que también esto lo he movido mal.
Pero bueno, ¿veis que se estaba moviendo desde abajo hacia arriba y tal?
Esto lo podríais hacer sin ningún problema, ¿eh?
Podéis poner que sea un segundo, que sea más,
para que uno, cada uno, pues tarde más, que tarde menos.
En un momento, en un momento.
Y esto funciona en todos los elementos HTML.
Esto lo estamos haciendo así.
Pero tanto el starting style como el allow discrete para animar el display,
lo tenéis ya con un soporte de más del 80% en los navegadores.
Así, tremendo, ¿eh?
¿Open es solamente para etiqueta dialog o funciona en cualquiera?
No, en cualquiera no.
Pero sí que te funciona también, por ejemplo, en details.
Details también tiene el atributo open.
Así que details también tendría open.
Y los demás, ¿ves?
Tienes el open state.
Si lo ponemos aquí open, debería, ¿ves?
Está abierto.
Si lo quitas, pues está cerrado.
Y ya está.
En details y en dialog.
En esos dos.
Y no recuerdo que haya ningún otro.
Que yo recuerdo, no hay otro.
¿Ya está para Tailwind?
No, pero lo bueno es que Tailwind no deja de ser CSS.
Así que podríais hacer cualquier cosa que estáis viendo aquí.
Lo podríais hacer en Tailwind.
Sin ningún problema.
Sin ningún problema.
Así que nada.
Aquí lo tenemos.
Claro, una vez que ya lo tenemos así, ya podríamos estilar mejor esto.
Lo podríamos poner aquí.
Este open lo podemos poner aquí.
El start tiene...
Esto ya lo podríamos poner acá.
¿Vale?
Esto así.
Y ya está.
Ya lo podemos...
No sé si esto...
Sí.
Esto funciona sin problemas.
Ya quedaría mucho mejor que no tener que hacerlo así.
Pero bueno, como lo estaba explicando de la otra forma,
pues solo para que lo tengáis en cuenta, lo estaba haciendo así por eso.
Lo que pasa es que aquí no soporta...
La versión que tenemos en Codilink no soporta esta sintaxis.
Por eso se queja, aunque esta sintaxis es válida.
O sea, funcionar funciona.
Como habéis podido ver, funcionar funciona.
O sea, funcionar funciona.