Ahora podemos crear ANIMACIONES CSS con display: none
HTML-код
- Опубликовано: 18 сен 2024
- ¡Descubre una impresionante novedad en CSS que cambiará cómo haces animaciones! Aprende a crear transiciones suaves sin necesidad de JavaScript, usando la nueva regla starting-style
▶ Artículo analizado: caniuse.com/?s...
▶ No te pierdas más directos en: / midudev
overflow: hidden y opacity: 0 se van a desplomar como el bitcoin
dentro del @starting-style?
Negativo overflow hidden es muy útil para animaciones , ya sea para animaciones deslizable, animaciones por capas before after, yo uso mucho overflow hidden dependo de el , sin esa propiedad no hay magia , opacity otra muy buena animación porque se va a deplomar opacity hace que un elemento desaparezca de manera fluida y no de golpe creo que no usas keyframes ? Lo uno es obligatorio y el otro se combina con lo que salió.
@@assasinsxxwhenxx2631 relax: 100% !important
Hahahahahaha bitcoin se desploma para arriba
Eres el máster del CCS, en la universidad me costaba mucho JS, era muy complicado, el JS del año 2013, pero ahora CSS es una maravilla
Ahora sí, voy a dejar mi comentario aquí y espero que no lo censuren (razón por la cual dejé de seguirte en Twitch): Gloria a Dios por esta nueva característica en CSS!!
📩 Haz recibído un mensaje de twitch: 🖕🏻
@@joedomat jajaja! Siempre hay quien muestra su educación adquirida en la calle
Recién me entero de [open] yo seguían usando js . Vaya más facilidad , y lo de display none cualquiera que le gusta animar sabe que era un problema yo medio lo camuflaba al colocarlo en tamano 0 así tenía ese margen porque display none desaparecía de una no se podía animar pero ahora es mejor una maravilla parece nada pero ayuda mucho
Que bueno! Vengo luchando bastante con este tipo de animaciones, ahora parece mucho más simple.
Miduuuu gracias por el tip.
Te comparto uno mío. Ya podes usar Markdown en las descripciones de los videos 🎉🎉🎉
Jejejeje no se nada de css me ha sorprendido bastante. Me quedé los divs jajajajajajajaja que maravilla. Gracias!!
Ahora echo en falta un @ending-style :D
Midu podrías hacer un video sobre cuando creas un elemento con js se anime al crearse con las view transitions y no solo aparezca lo que se creo? Y también si se puede al momento de eliminar dicho elemento que tenga una animación
que chulo! gracias! genial explicación!
esta muy tocho para escritorio, n lo conocia gracias Midu
Dolor de cabeza con los dialogos jaja gracias Migue
ahora a esperar que el wey de la alcantarilla actualice el navegador 🤑
Gracias papá Dio por estos vídeos 🎉
Gracias
Dejo comentario para encontrar el video más adelante!
gracias, voy a editar mi web ahora mismo
Se aprecia mucho esta información. 😄
Buenísimo.
Midu podrias hablar de Jala University
3:22 Me pregunto si la cuota de mercado que se indica para Firefox no viene dada por las métricas que recolecta el mismo navegador.
Dado que muchos de nosotros usamos Firefox porque nos permite meterle bastante mano a la configuración y desactivar estas características, ¿no será que ese dato no es del todo confiable?
@@gjavier aquí otro fiel usuario de firefox
El santo grial de CSS!!!
Siempre me pregunté sobre porqué CSS no tiraba parra el lado de animaciones nativas. Que bueno que esté sucediendo, ya era hora.
Eso de "@starting-style" lo he visto antes en una transición. creo que era transform o algo así. pensé quera cosas de las query media.
Noooooooooooo quiero llorar..... Estoy vivo para ver esto...😂 Brutal esto
No se mucho de css pero 🤯
Yo soy parte del 0.01 % que aún usa firefox y si desaparece tendré que soportar las webtools de chrome 😢
a mi el details no me funciona igual, no logro animar la altura, lo unico q logro animar es el background-color.... :(
pudiste solucionarlo?
Era lo que soñaba, dios! Era la única razón por la que no usaba los nuevos elementos, por el tema de los estilos ahora es god.
ya me imagino ese kilómetro de clases en tailwind
gracias! Gracias! GRACIAS!
Ya era hora.
buenísimo!
Pero animar el display no seria perjudicial para el rendimiento de la página ?
Tenia entendido que es mejor utilizar transform y opacity
No usen & para agregar estilos a etiquetas hijas, me pasó con varios usuarios que tienen como una versión no actualizada del navegador, y no se aplicaban los estilos, tuve que volver a la asignación tradicional de .padre .hijo , es lo más estable.
LIKE PARA QUE @midulive HAGA UN CURSO DE CSS ACTUALIZADO, SALUDOS🤙
Muy bueno 👏
Gracias!
se utiliza la librería boostrap verdad?
Por fin, por fin terminó la beta de css
La cuota de Firefox baja porque ya no tiene nada que lo diferencie de los demas navegadores, yo uso un Chromium porque hay extensiones que no funcionan bien el Firefox
No habias hecho un video de esto haces unos meses, del display none?
Si se puede hacer esa animación con css desde hace varios años transition lo utilizo
buenisimo
Yo sigo usando Firefox :) y Brave en el teléfono
pues yo me he pasado a firefox hace poco, ahi, subiendo el porcentaje (?)
não podes hacer isso com affter ou beford, no me lembro?
no logro hacerlo funcionar con el details ayuda
Yo creo que en cuanto chrome desactive la API 2 de las extensiones y adblock deje de funcionar, el número de usuarios de firefox crecerá.
Dice mi mamá que gracias ;)
No me funciona el allow-discrete :( lo cierra de golpe
Esas animaciones parecen de Plasma, ngl
👏👏👏👏👏👏👏👏👏 muy bueno 👍
a mi no me funciona la animacion de salida
Oh estaba poniendo "display" como una propiedad de css y no dentro del transition, AHORA SI!
framer motion sera deprecado 0-0 y justo que lo estaba aprendiendo :(
😮
es que a mi firefox me va re lento y no se porque....sobre todo en youtube o paginas con mucha carga en javascript calculo. por eso lo deje de usar. ahora estoy con Edge...pos porq si jajja
a mi tambien me paso lo mismo, hice unas pruebas con Edge, Chrome, Brave y Opera y me cambie a Brave.
Pero bueno! Es que esto Vue ya lo hace 😂
Primer comentarioooooo. Saludos.
43 visitas en 2 minutos cuenta en decadencia 😅
cuenta en chaquetensia
dialog {
/* PASO 0: ESTADO INICIAL */
transform: scale(0) translate(0px, 100px);
opacity: 0;
transition: transform 0.3s ease-in-out, opacity 0.3s ease;
}
dialog[open] {
/* PASO 1: AL ABRIRLO */
transform: scale(1) translate(0px, 0px);
opacity: 1;
}
dialog.closing {
/* PASO 2: AL CERRARLO */
transform: scale(0);
opacity: 0;
}
yo utiliso visibility esta bien esta mal?
El visiblity deja el elemento todavía en el dom, a diferencia del display none para usar ese necesitabas algo como pointer-events: none