Me gusta que css este mejorando para evitar usar al minimo posible javascript en animaciones o temas de diseño. Eso va a ser que javascript quede solo para temas de logica e informacion.
Dios!!! Tanto lo esperaba. Ojalá pronto el z-index si es que se puede, que más que animado parece un delay, sería genial que se vaya difuminando hasta su capa correcta. Tantas propiedades que no se pueden animar pipipi. Y exacto la idea es hacerlo con puro CSS, no con JavaScript o como algunas personas que aún piensan que la forma más óptima es usar jQuery XD
En todos mis proyectos tenía que animar el max-height y el max-width. Y con ésto es la solución absoluta!!! (Que también me quita dolores de cabeza) Gracias!!!
Maravilloso, mucho tiempo mezclando animaciones css con javascript por culpa de esto. Genial!! Me parece grandioso que cada vez el javascript esté más orientado a la lógica y css te provea de todo lo necesario para el ui ux
@@the-retro-center-espanolObjetos Caused Jidly Historialitated (CJH) Bueno esto es un propiedad muy compleja, que pocos saben, tu centrate en que está orientado a objetos a secas
Hace muchos años se podia hacer eso con jQuery mediante el fadein o fadeout, hacia una animación con la opacidad y le daba un display none al final, pero me parece genial que se pueda hacer de forma nativa con css
Maximo o minimo, creo que es minimo man te equivocaste, pero no pasa nada man por eso hay gente como yo que ayuda a los que van un poco perdidos denada bro
Yo nisiquiera podia usar el animationEnd de javascript porque el cliente pedia que se pudiera revertir la compleja animacion con acciones de usuario (ejemplo popover pasando el raton por encima muchas veces rapido) y si lo hacia con animationEnd en JS se acumulaban stacks y empezaba a glitchearse. Tenia que usar un setimeout con la duracion exacta de la animacion y luego comprobar que el estado de los styles estaba correcto para hacer display none y sino no ejecutar tal acción. Un verdadero casoplon de codigo para algo tan simple...
Con js cuando se aplica el estilo final que se active por llamada desde la raíz de ejecución y listo, de hecho así lo armaron a eso porque se lo ve en propiedades de js.
Personalmente no me ha tocado hacer esto antes, pero tiene que ser la misma sensación de cuando en Firefox añadieron la propiedad backdrop-filter con el blur jajajajja
Hace menos de una semana me paso ese mismo dolor de cabeza, ahora veo como gaste mi tiempo en 30 líneas de código, ahora lloro mirando lo fácil que era que nos solucionaran ese problema
caray!... llevo muuuchos años esperando por esta mejora!. Midu tiene toda la razón. Parece una chorrada, pero no imaginas el quebradero de cabeza que produce trabajar una serie de animaciones que requieren usar display: none de ese modo. El uso de JS para animaciones como esa no es ideal, porque vas contra todo principio de optimizar el rendimiento. Una simple animación no debería requerir un script.
Esto podía realizarse sin js, añadiendo otra animación junto a esa poniéndole un delay de la duracion de la opacidad al display none. Por ej: animation: 0.3s animacionOpacity, 0.1s animacionDisplayNone .3s; @keyframes animacionOpacity{ to{ opacity: 0 } } @keyframes animacionDisplayNone { to{ display: none } }
Inicialmente mi elemento tiene una variable booleana en true que lo muestra con una animación de fade in luego se cambia el valor de la variable false cambia la clase de fade in por esta pasa la animacioón y funciona. No se si por esa actualización funciona el siguiente código: ` .animation-fade-out-010 { opacity: 1; display: none; animation: animation-fade-out 0.1s ease-in forwards; } @keyframes animation-fade-out { 0% { opacity: 1; display: flex; } 100% { opacity: 0; display: none; } } `
No hago scripting, solamente programación, pero este cambio es brutal, recuerdo que cuando estaba desarrollando me topé con cosas así y tenía que caer en javascript.
Totalmente si es muy molesto recurrir a JavaScript solo por eso y para poder animar tenía que hacer siempre un setTimeOut de la animación para que poder aplicar el display: none al final de la animación 😮💨
Pero la pega que le veo es que solo funciona en navegadores modernos por lo que veo y los diseñadores debemos hacer diseños que se vean bien por lo menos en la versión actual y en versiones anteriores. No siempre en la ultima versión me explico? No obstante está bien saberlo y te quería preguntar ¿Tienes algún video donde pueda dar un repaso a mis conocimientos de javascript sin ser un curso?
Ayer comencé el blog de mi colectivo y estaba necesitando esta función para hacer que un menú desplegable se animara correctamente, sin saberlo ya estaba usando esta forma de animar, pero tonto de mí inexperto en css, no lo supe ver jsjsjsjsjs
Ayuda demasiado la implementación, antes me tocaba en JavaScript un timer para que haga la animación antes de cambiar el show y que al terminar el timer se oculte
Mi pregunta es si esto funcionara ñara todo los navegadores. O solo para las versiones actualizadas. Es decir lo que se actualizo fue css o los navegadores. Es decir. Ahora mismo yo cojo mi firefox del 2020. Programo eso y funciona?
Muy genial, nunca usé display: none para desaparecer elementos porque no es animable siempre he usado visibility: hidden que si es animable, el tema que está propiedad preserva el espacio del elemento desaparecido cosa que no pasa con display: none. Encuentro que ese es el beneficio de esta nueva opción
pues yo lo que hacia era animar el opacity x segundos y con js colocaba un setTimeOut y luego de la misma cantidad de segundos le aplicaba el display none, esto me ahorrara 3 lineas de codigo js, 3 lineas de codigo css y una clase
Pregunta para quien lo entendió.... Al final es solo animation? O puedo capturar los datos en caso que la utilizemos para actualizar una db.... Definitivamente tendremos que usar javascript de vuelta? Desaparece el id?
De verdad es una chorrada porque hacerlo con JS es sumamente simple, si hubiera sido algo extremadamente complicado igual te aceptaba que era algo que cambiaba todo, pero no es el caso.
Solo los que lo hemos hecho entendemos lo feliz que nos pone esa notice
Tal cual!!
Literal hoy lo necesitaba jajaja
Me parece muy loco como te mantienes actualizado con cada cosa que sale. Muy genial tu contenido la verdad
Es tan increíble ver cómo escribes código en un dos por tres, es realmente emocionante llegar hasta ese nivel! Algún día
2 x 3 es 6 carabotella
Me gusta que css este mejorando para evitar usar al minimo posible javascript en animaciones o temas de diseño.
Eso va a ser que javascript quede solo para temas de logica e informacion.
exacto
No sabes la alegría que me acaba de dar conocer esta nueva funcionalidad. No te lo imaginas 😂🎉
No sabes lo poco que me importa tu opinion
@@anatolygb5707 Suficiente como para que lo hayas dedicado con comentario haciendoselo saber 🤣
@@juanandresbohorquezbolanos5604 decile........ "lero-lero"
Dios!!! Tanto lo esperaba. Ojalá pronto el z-index si es que se puede, que más que animado parece un delay, sería genial que se vaya difuminando hasta su capa correcta. Tantas propiedades que no se pueden animar pipipi. Y exacto la idea es hacerlo con puro CSS, no con JavaScript o como algunas personas que aún piensan que la forma más óptima es usar jQuery XD
Lo del display none me parece muy bueno, siempre me tocaba usar alternativas para animar un display: none.
Ahora es pan comido. 🎇🎇✨✨
Hace tiempo que me preguntaba cuando estaría disponible, ahora es todo una bendición.
Me encanta la pasión que le metes a las cosas que explicas 😅 me emociona cada vez que compartes estas cosas nuevas
Lo deja todo en la cancha emoción 100% real grande miduv
Alashama Colombia darma
En todos mis proyectos tenía que animar el max-height y el max-width. Y con ésto es la solución absoluta!!! (Que también me quita dolores de cabeza) Gracias!!!
Que es que es que es que es que me da igual pinpinela
Maravilloso, mucho tiempo mezclando animaciones css con javascript por culpa de esto. Genial!! Me parece grandioso que cada vez el javascript esté más orientado a la lógica y css te provea de todo lo necesario para el ui ux
está orientado a objetos CJH!
@@anatolygb5707 no entendí, que son los objetos CJH?
@@the-retro-center-espanolObjetos Caused Jidly Historialitated (CJH) Bueno esto es un propiedad muy compleja, que pocos saben, tu centrate en que está orientado a objetos a secas
Genial!! Donde puedo ver estos updates y asi estar al tanto de las features que van agregando? gracias!
Vaya labor informativa nos estás regalando... Si pasas por Murcia alguna vez te invito a comer!
Eso me lo apunto!
Muy bueno, yo hacia algo similar con position absolute y visibility: hidden (todo porque el display: none no se podia animar)
Hace muchos años se podia hacer eso con jQuery mediante el fadein o fadeout, hacia una animación con la opacidad y le daba un display none al final, pero me parece genial que se pueda hacer de forma nativa con css
el rendimiento bro
Oye, buenísimo 👏🎉 harán lo mismo con la propiedad "transition" algún día? Suelo usar más esa 😅
eres lo maximo midu, ten eso siempre presente
Maximo o minimo, creo que es minimo man te equivocaste, pero no pasa nada man por eso hay gente como yo que ayuda a los que van un poco perdidos denada bro
apenas estoy aprendiendo desarrollo web y tus videos son entretenidos y aprendo algo nuevo siempre
No sabes cuándo espere este día 😂😂😂😂
Esto me paso en un proyecto es un dolor de cabeza JJAJAAJ y me alegran que vayan mejorando
aue maravilla por fin 👏🏻
Yo nisiquiera podia usar el animationEnd de javascript porque el cliente pedia que se pudiera revertir la compleja animacion con acciones de usuario (ejemplo popover pasando el raton por encima muchas veces rapido) y si lo hacia con animationEnd en JS se acumulaban stacks y empezaba a glitchearse. Tenia que usar un setimeout con la duracion exacta de la animacion y luego comprobar que el estado de los styles estaba correcto para hacer display none y sino no ejecutar tal acción. Un verdadero casoplon de codigo para algo tan simple...
Con js cuando se aplica el estilo final que se active por llamada desde la raíz de ejecución y listo, de hecho así lo armaron a eso porque se lo ve en propiedades de js.
No es una tontería, a nivel del desarrollo de CSS es brutal, es un brinco gigante, que bonito es esto! =D
Personalmente no me ha tocado hacer esto antes, pero tiene que ser la misma sensación de cuando en Firefox añadieron la propiedad backdrop-filter con el blur jajajajja
Hace menos de una semana me paso ese mismo dolor de cabeza, ahora veo como gaste mi tiempo en 30 líneas de código, ahora lloro mirando lo fácil que era que nos solucionaran ese problema
caray!... llevo muuuchos años esperando por esta mejora!. Midu tiene toda la razón. Parece una chorrada, pero no imaginas el quebradero de cabeza que produce trabajar una serie de animaciones que requieren usar display: none de ese modo. El uso de JS para animaciones como esa no es ideal, porque vas contra todo principio de optimizar el rendimiento. Una simple animación no debería requerir un script.
Esto podía realizarse sin js, añadiendo otra animación junto a esa poniéndole un delay de la duracion de la opacidad al display none.
Por ej:
animation: 0.3s animacionOpacity, 0.1s animacionDisplayNone .3s;
@keyframes animacionOpacity{
to{
opacity: 0
}
}
@keyframes animacionDisplayNone {
to{
display: none
}
}
por fin lo que tanto espere, ya puedo descansar en paz.
Wow! Impresionante! Como que lo hubieran hecho desde hace años, no?
Inicialmente mi elemento tiene una variable booleana en true que lo muestra con una animación de fade in luego se cambia el valor de la variable false cambia la clase de fade in por esta pasa la animacioón y funciona. No se si por esa actualización funciona el siguiente código:
` .animation-fade-out-010 {
opacity: 1;
display: none;
animation: animation-fade-out 0.1s ease-in forwards;
}
@keyframes animation-fade-out {
0% {
opacity: 1;
display: flex;
}
100% {
opacity: 0;
display: none;
}
}
`
Que guapa esta característica, me acabaron de dar una idea 😁
Que hermoso!! Hoy es un buen dia xD
Este detalle es guapísimo, la elegancia del CSS está alcanzando niveles estratosféricos 😂
Menudo inventazo. Eso antes era un coñazo con js. Gracias por el video.
ahora a esperar años a que todos tengan actualizados los navegadores
Brutal, y con los slide down?
Excelente noticia. Para el que quiera animar elementos eliminados del DOM usando states de React, la librería Framer Motion lo permite.
Ese joven programador tan ilusionado yendo a poner una animación al display: none y descubriendo la cruda realidad del mundo. Nunca más.
No puedes poner que la animacion en el ultimo porcentaje, en los keyframes ponga el display none ?
muy buena información, cada día mas sorprendido.
Ojalá algún día implementen una variante al overflow: hidden que no corte las sombras. 🙏🏼🙏🏼🙏🏼
Genial midu, un dolor de cabeza menos ojala sigan implementando mas porque faltan unos cuantos 😅
Parecerá poca cosa, pero la de veces que hemos tenido que resolver este problema y ahora es tan sencillo y elegante 🤯🤯
ufffff, ya era hora.
No hago scripting, solamente programación, pero este cambio es brutal, recuerdo que cuando estaba desarrollando me topé con cosas así y tenía que caer en javascript.
Totalmente si es muy molesto recurrir a JavaScript solo por eso y para poder animar tenía que hacer siempre un setTimeOut de la animación para que poder aplicar el display: none al final de la animación 😮💨
Diablos lo que necesitaba
Pero la pega que le veo es que solo funciona en navegadores modernos por lo que veo y los diseñadores debemos hacer diseños que se vean bien por lo menos en la versión actual y en versiones anteriores. No siempre en la ultima versión me explico? No obstante está bien saberlo y te quería preguntar ¿Tienes algún video donde pueda dar un repaso a mis conocimientos de javascript sin ser un curso?
Ahora a combinarlo con transition-delay 🙌
Ayer comencé el blog de mi colectivo y estaba necesitando esta función para hacer que un menú desplegable se animara correctamente, sin saberlo ya estaba usando esta forma de animar, pero tonto de mí inexperto en css, no lo supe ver jsjsjsjsjs
Gracias por este hermoso conocimiento
Tenes alguna pagina donde pueda enterarme de las novedades de css js y html?
A mi me parece una buena noticia! 😄
Ojalá que todos los navegadores lo implementen
Todos los navegadores basados en chromium lo tienen
Ayuda demasiado la implementación, antes me tocaba en JavaScript un timer para que haga la animación antes de cambiar el show y que al terminar el timer se oculte
esto es top!! el problema es cuando estará con buen soporte
Al fin man!
En el keyframe
Debes debe de color cuando llegue al 100% ahí deberías d colocar el display none
Y para animar de forma más lenta como se mueve el elemento a la posición del que se ha eliminado?
Mi pregunta es si esto funcionara ñara todo los navegadores. O solo para las versiones actualizadas. Es decir lo que se actualizo fue css o los navegadores. Es decir. Ahora mismo yo cojo mi firefox del 2020. Programo eso y funciona?
Muy genial, nunca usé display: none para desaparecer elementos porque no es animable siempre he usado visibility: hidden que si es animable, el tema que está propiedad preserva el espacio del elemento desaparecido cosa que no pasa con display: none. Encuentro que ese es el beneficio de esta nueva opción
Midu, crees que hoy en día ya se puede usar CSS NEsting para proyectos pequeños como páginas webs para clientes?
pues yo lo que hacia era animar el opacity x segundos y con js colocaba un setTimeOut y luego de la misma cantidad de segundos le aplicaba el display none, esto me ahorrara 3 lineas de codigo js, 3 lineas de codigo css y una clase
tremendo!!! años metiendo workaround para emular esto 🥹
Tardará en soportarse en todos los navegadores? Me interesa para mí proyecto que tengo en pausa. O será que mientras tanto lo hago con js
:D
Esto hace 1 año era ciencia ficción
En cada novedad, camba todo xd
Buenisimo el problema es que perderiamos el soporte en browsers viejos. Pero si q en un futuro cercano estara muy bien..
Que actualicen y ya está
Excelente video.
Ah que belleza, jajaj easy, a mí me emociona muchísimo
Soy el único que se pregunta si el movimiento de los elementos posteriores al animado se puede suavizar?
Buenísimo para animar menús desplegables
Wow increible!!
Esto nos simplifica mucho el trabajo, porque hacerlo con JavaScript es más trabajo
El futuro es hoy!
Cómo se hace esto con tailwint css
Te quiero!
Excelente video
pero lo hizo en brave cual chrome?
Pregunta para quien lo entendió.... Al final es solo animation? O puedo capturar los datos en caso que la utilizemos para actualizar una db.... Definitivamente tendremos que usar javascript de vuelta? Desaparece el id?
El otro día estaba dandome dolores de cabeza intentando hacer éso, hasta que me rendí con la animación para eliminar😅
🤩 adios de hacer movidas para el display none animado 🎉🎉
el futuro es hoy
hay algun link para ver la compatibilidad de esto?
Oye yo batalle con eso en si momento es muy emocionante saber que ya eso funciona🎉🎉🎉
Totalmente de acuerdo, pues no me ha tocado esto las p****** siempre. Buena noticia!!!
Ya no existe Internet Explorer 😂😂 pero Safari quiere su puesto
De verdad es una chorrada porque hacerlo con JS es sumamente simple, si hubiera sido algo extremadamente complicado igual te aceptaba que era algo que cambiaba todo, pero no es el caso.
Creo que lo hacia cambiando display none por visibility hidden, y no dejaba el hueco
No, el visibility hidden no afecta al layout
Alguien sabe que Linux esta utilizando?
No es Linux es macOS
LO CAMBIA TODO!
Excelente vídeo 10/10
07:53 Puedes hacer un evento con animationend, pero no utilices el timeout que no esta sincronizado con el render de refresco del navegador.
Y podría funcionar si se pusiera en la animación que en el 0% al 90% tenga la animación y en el 100% el display none ?
No sé si funcionaria ?
Un buen diseño es mejor hacerlo desde CSS. Un buen avance.
Si haces un keyframe del tipo: 0%{opacity:1} 99% {opacity: 0;} 100% {display: none} creo que funcionaría en cualquier navegador
Pensé lo mismo al ver el video, lo has probado?
Esto si es un notición!!!!
Ojala algun dia se pueda animar el order
La era de htmx se acerca.
Que bendicion!