Esta NOVEDAD de CSS ¡SI QUE LO CAMBIA TODO! 🤯
Vložit
- čas přidán 31. 08. 2023
- 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 - Věda a technologie
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
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
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"
Lo del display none me parece muy bueno, siempre me tocaba usar alternativas para animar un display: none.
Ahora es pan comido. 🎇🎇✨✨
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
Por fin llegó esto, que manera de renegar cuando habia que aplicar una animación con display: none! Excelente video Midu
Hace tiempo que me preguntaba cuando estaría disponible, ahora es todo una bendición.
Muy bueno, yo hacia algo similar con position absolute y visibility: hidden (todo porque el display: none no se podia animar)
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
apenas estoy aprendiendo desarrollo web y tus videos son entretenidos y aprendo algo nuevo siempre
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!
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
aue maravilla por fin 👏🏻
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
Al fin man!
No sabes cuándo espere este día 😂😂😂😂
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?
@@pablotoledo3935Objetos Caused Jidly Historialitated (CJH) Bueno esto es un propiedad muy compleja, que pocos saben, tu centrate en que está orientado a objetos a secas
Gracias por este hermoso conocimiento
muy buena información, cada día mas sorprendido.
Esto me paso en un proyecto es un dolor de cabeza JJAJAAJ y me alegran que vayan mejorando
ufffff, ya era hora.
Wow increible!!
Diablos lo que necesitaba
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
Que hermoso!! Hoy es un buen dia xD
Excelente video.
por fin lo que tanto espere, ya puedo descansar en paz.
Midu, crees que hoy en día ya se puede usar CSS NEsting para proyectos pequeños como páginas webs para clientes?
Excelente video
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.
Excelente vídeo 10/10
Que guapa esta característica, me acabaron de dar una idea 😁
tremendo!!! años metiendo workaround para emular esto 🥹
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
chulada! :):)
Genial midu, un dolor de cabeza menos ojala sigan implementando mas porque faltan unos cuantos 😅
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
Ojalá algún día implementen una variante al overflow: hidden que no corte las sombras. 🙏🏼🙏🏼🙏🏼
Y para animar de forma más lenta como se mueve el elemento a la posición del que se ha eliminado?
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
Brutal, y con los slide down?
No puedes poner que la animacion en el ultimo porcentaje, en los keyframes ponga el 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;
}
}
`
Wow! Impresionante! Como que lo hubieran hecho desde hace años, no?
Te quiero!
Esto si es un notición!!!!
Que bendicion!
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...
Maravilloso
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
En cada novedad, camba todo xd
Parecerá poca cosa, pero la de veces que hemos tenido que resolver este problema y ahora es tan sencillo y elegante 🤯🤯
En el keyframe
Debes debe de color cuando llegue al 100% ahí deberías d colocar el display none
Este detalle es guapísimo, la elegancia del CSS está alcanzando niveles estratosféricos 😂
Oye yo batalle con eso en si momento es muy emocionante saber que ya eso funciona🎉🎉🎉
esto es top!! el problema es cuando estará con buen soporte
Tenes alguna pagina donde pueda enterarme de las novedades de css js y html?
Ahora a combinarlo con transition-delay 🙌
Que pasada!
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.
No es una tontería, a nivel del desarrollo de CSS es brutal, es un brinco gigante, que bonito es esto! =D
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?
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
Alguien sabe que Linux esta utilizando?
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.
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
Ojala algun dia se pueda animar el order
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
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?
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á
Ah que belleza, jajaj easy, a mí me emociona muchísimo
A mi me parece una buena noticia! 😄
Ojalá que todos los navegadores lo implementen
Todos los navegadores basados en chromium lo tienen
ahora a esperar años a que todos tengan actualizados los navegadores
pero lo hizo en brave cual chrome?
Aleluya!
Excelente noticia. Para el que quiera animar elementos eliminados del DOM usando states de React, la librería Framer Motion lo permite.
El futuro es hoy!
Creo que lo hacia cambiando display none por visibility hidden, y no dejaba el hueco
No, el visibility hidden no afecta al layout
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 😮💨
Cómo se hace esto con tailwint css
:D
Esto hace 1 año era ciencia ficción
hay algun link para ver la compatibilidad de esto?
el futuro es hoy
Totalmente de acuerdo, pues no me ha tocado esto las p****** siempre. Buena noticia!!!
LO CAMBIA TODO!
🎉🎉🎉❤❤❤
Lo cambia todo 🗿
El otro día estaba dandome dolores de cabeza intentando hacer éso, hasta que me rendí con la animación para eliminar😅
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 ?
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?
Ese joven programador tan ilusionado yendo a poner una animación al display: none y descubriendo la cruda realidad del mundo. Nunca más.
🤩 adios de hacer movidas para el display none animado 🎉🎉
Esto nos simplifica mucho el trabajo, porque hacerlo con JavaScript es más trabajo
Interesante, pero aún se debe espererar un tiempo para que sea un estándar a usar.
Un buen diseño es mejor hacerlo desde CSS. Un buen avance.
Ya no existe Internet Explorer 😂😂 pero Safari quiere su puesto