Esta NOVEDAD de CSS ¡SI QUE LO CAMBIA TODO! 🤯

En este video te mostrare como puedes usar la propiedad display de CSS para hacer animaciones. !PRUEBALO¡
▶ No te pierdas más directos en: / midudev
▶ Discord de la Comunidad: / discord

[@DaNiel-sq3em]

Solo los que lo hemos hecho entendemos lo feliz que nos pone esa notice

[@midulive]

Tal cual!!

[@Julliigan]

Literal hoy lo necesitaba jajaja

[@rojasguarachinestorignacio884]

Me parece muy loco como te mantienes actualizado con cada cosa que sale. Muy genial tu contenido la verdad

[@juancamilosalcedo9832]

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

[@anatolygb5707]

2 x 3 es 6 carabotella

[@code1866]

No sabes la alegría que me acaba de dar conocer esta nueva funcionalidad. No te lo imaginas 😂🎉

[@anatolygb5707]

No sabes lo poco que me importa tu opinion

[@juanandresbohorquezbolanos5604]

@@anatolygb5707 Suficiente como para que lo hayas dedicado con comentario haciendoselo saber 🤣

[@jinastarin]

@@juanandresbohorquezbolanos5604 decile........ "lero-lero"

[@emanuelpalacio-q3l]

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.

[@terryadityaildefonsochagua3710]

exacto

[@danielmantilla3325]

Hace tiempo que me preguntaba cuando estaría disponible, ahora es todo una bendición.

[@elliotgaramendi]

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

[@CbastianAraque]

Lo del display none me parece muy bueno, siempre me tocaba usar alternativas para animar un display: none. Ahora es pan comido. 🎇🎇✨✨

[@codesandtags]

Me encanta la pasión que le metes a las cosas que explicas 😅 me emociona cada vez que compartes estas cosas nuevas

[@greenPowerLab]

Lo deja todo en la cancha emoción 100% real grande miduv

[@anatolygb5707]

Alashama Colombia darma

[@normanejm]

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!!!

[@anatolygb5707]

Que es que es que es que es que me da igual pinpinela

[@davidagreda2023]

eres lo maximo midu, ten eso siempre presente

[@anatolygb5707]

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

[@the-retro-center-espanol]

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

[@anatolygb5707]

está orientado a objetos CJH!

[@the-retro-center-espanol]

@@anatolygb5707 no entendí, que son los objetos CJH?

[@anatolygb5707]

@@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

[@miguelinho8824]

apenas estoy aprendiendo desarrollo web y tus videos son entretenidos y aprendo algo nuevo siempre

[@kevindana2170]

Muy bueno, yo hacia algo similar con position absolute y visibility: hidden (todo porque el display: none no se podia animar)

[@DAVIDIL81]

Vaya labor informativa nos estás regalando... Si pasas por Murcia alguna vez te invito a comer!

[@midulive]

Eso me lo apunto!

[@Pindassh]

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

[@terryadityaildefonsochagua3710]

el rendimiento bro

[@SaRaSa2012]

Genial!! Donde puedo ver estos updates y asi estar al tanto de las features que van agregando? gracias!

[@efisiodev]

aue maravilla por fin 👏🏻

[@luismoncada9654]

No sabes cuándo espere este día 😂😂😂😂

[@ale02.coding]

Esto me paso en un proyecto es un dolor de cabeza JJAJAAJ y me alegran que vayan mejorando

[@facuzeronqn]

Que hermoso!! Hoy es un buen dia xD

[@rubenpire657]

Oye, buenísimo 👏🎉 harán lo mismo con la propiedad "transition" algún día? Suelo usar más esa 😅

[@jschellDev]

Al fin man!

[@diegogutierreztafur9498]

muy buena información, cada día mas sorprendido.

[@josee.payemamani5062]

ufffff, ya era hora.

[@bomboneramufa]

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.

[@TheLastXV]

Diablos lo que necesitaba

[@marc_gutii]

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

[@VitalPlusLife]

por fin lo que tanto espere, ya puedo descansar en paz.

[@josedanielpumarejogarcia853]

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; } } `

[@javieromedes754]

No es una tontería, a nivel del desarrollo de CSS es brutal, es un brinco gigante, que bonito es esto! =D

[@jacl_dev]

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

[@andresTorrecilla14]

Que guapa esta característica, me acabaron de dar una idea 😁

[@desko27]

Este detalle es guapísimo, la elegancia del CSS está alcanzando niveles estratosféricos 😂

[@legionsra]

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...

[@antonyacostaleonelgranados5236]

Genial midu, un dolor de cabeza menos ojala sigan implementando mas porque faltan unos cuantos 😅

[@ES-zf1mc]

Te quiero!

[@akyrogames]

Menudo inventazo. Eso antes era un coñazo con js. Gracias por el video.

[@MatiDragon]

Gracias por este hermoso conocimiento

[@jeanpaulsanchezmendoza1328]

Wow! Impresionante! Como que lo hubieran hecho desde hace años, no?

[@panamatsu5958]

Parecerá poca cosa, pero la de veces que hemos tenido que resolver este problema y ahora es tan sencillo y elegante 🤯🤯

[@cbr9731]

Excelente video.

[@chrissbenitez]

Wow increible!!

[@alpaca5548]

ahora a esperar años a que todos tengan actualizados los navegadores

[@TraigoLaClave]

tremendo!!! años metiendo workaround para emular esto 🥹

[@frontend96]

Ojalá algún día implementen una variante al overflow: hidden que no corte las sombras. 🙏🏼🙏🏼🙏🏼

[@joseerickcarreon5895]

Excelente vídeo 10/10

[@guillermoherrera5769]

Excelente video

[@RicardoMorales-km6yy]

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.

[@MiseryKira]

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.

[@airixxxx]

Excelente noticia. Para el que quiera animar elementos eliminados del DOM usando states de React, la librería Framer Motion lo permite.

[@FDA25]

Que pasada!

[@billyteske6492]

Esto si es un notición!!!!

[@luis96xd]

A mi me parece una buena noticia! 😄 Ojalá que todos los navegadores lo implementen

[@DiMagggio741]

Todos los navegadores basados en chromium lo tienen

[@ElPolemista]

Brutal, y con los slide down?

[@alexandercanavire7144]

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 } }

[@GonDevel]

En cada novedad, camba todo xd

[@addevmoises]

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

[@roycascante6404]

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 😮‍💨

[@greenPowerLab]

Oye yo batalle con eso en si momento es muy emocionante saber que ya eso funciona🎉🎉🎉

[@__adrian__martin__]

Que bendicion!

[@syl_28]

No puedes poner que la animacion en el ultimo porcentaje, en los keyframes ponga el display none ?

[@pablolancho6278]

esto es top!! el problema es cuando estará con buen soporte

[@anthon952]

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

[@jaimemartin1932]

Y para animar de forma más lenta como se mueve el elemento a la posición del que se ha eliminado?

[@franciscojavierrestrepocas8664]

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

[@GierIbac]

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

[@daviddemetriolopezpaz7303]

chulada! :):)

[@AlexXiuhuitl]

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

[@gustavovera5876]

Ahora a combinarlo con transition-delay 🙌

[@andresvalenzuela]

Buenísimo para animar menús desplegables

[@musikdoktor]

Buenisimo el problema es que perderiamos el soporte en browsers viejos. Pero si q en un futuro cercano estara muy bien..

[@TheLastXV]

Que actualicen y ya está

[@carlukiio]

Ese joven programador tan ilusionado yendo a poner una animación al display: none y descubriendo la cruda realidad del mundo. Nunca más.

[@cleper5152]

Ah que belleza, jajaj easy, a mí me emociona muchísimo

[@danielsucno1636]

Tenes alguna pagina donde pueda enterarme de las novedades de css js y html?

[@Retales2022]

Esto nos simplifica mucho el trabajo, porque hacerlo con JavaScript es más trabajo

[@nameteGM]

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?

[@guillermo.dapaixao]

el futuro es hoy

[@dautislayer5272]

Creo que lo hacia cambiando display none por visibility hidden, y no dejaba el hueco

[@midulive]

No, el visibility hidden no afecta al layout

[@marketinginhouse]

Midu, crees que hoy en día ya se puede usar CSS NEsting para proyectos pequeños como páginas webs para clientes?

[@isahirzm]

hay algun link para ver la compatibilidad de esto?

[@staffel0232]

:D Esto hace 1 año era ciencia ficción

[@calimio6]

El futuro es hoy!

[@michaelminda8993]

Cómo se hace esto con tailwint css

[@JuanFcoHGon2014]

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?

[@yensex]

En el keyframe Debes debe de color cuando llegue al 100% ahí deberías d colocar el display none

[@julianvallejo562]

pero lo hizo en brave cual chrome?

Totalmente de acuerdo, pues no me ha tocado esto las p****** siempre. Buena noticia!!!

[@Jesus_Leandro]

El otro día estaba dandome dolores de cabeza intentando hacer éso, hasta que me rendí con la animación para eliminar😅

[@burrita4358]

Alguien sabe que Linux esta utilizando?

[@jesusv.3312]

No es Linux es macOS

[@ianrivas9404]

Ojala algun dia se pueda animar el order

[@gamuro6977]

Soy el único que se pregunta si el movimiento de los elementos posteriores al animado se puede suavizar?

[@pomelopy]

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?

[@cislsky]

🤩 adios de hacer movidas para el display none animado 🎉🎉

[@davidcode22]

Maravilloso

[@alejandrogordo9468]

LO CAMBIA TODO!

[@Diablerick]

Un buen diseño es mejor hacerlo desde CSS. Un buen avance.

[@galletaleekun3869]

Ya no existe Internet Explorer 😂😂 pero Safari quiere su puesto

[@diegoentraigues]

Si haces un keyframe del tipo: 0%{opacity:1} 99% {opacity: 0;} 100% {display: none} creo que funcionaría en cualquier navegador

[@caalmeydal]

Pensé lo mismo al ver el video, lo has probado?

[@roneiservargas]

Lo cambia todo 🗿