LA NUEVA FORMA DE MANEJAR EL DOM - View Transition API

[@earlpokercs8460]

hermano te amo, me pase todo el día buscando información sobre esto, lei y volví a leer documentación. y solo me faltaba el flushSync ); . muchas gracias por tu aporte a la comunidad sos grandee

[@risehit]

Está bueno de forma nativa, aunque la gran mayoría usa framework o librerias que tienen sus formas de hacerlo, pero está bien bueno que lo hayan agregado

[@luchotrea1727]

Hola! genial la nueva API. Logré que funcione en mi componente Navbar con etiquetas y el atributo href, pero tengo una duda. Cuando utilizamos react-router-dom generalmente utilizamos la etiqueta Link y el atributo to. En este caso, ¿Cómo haríamos para implementar View Transition con la etiqueta Link y el atributo to de react-router-dom? Desde ya muchas gracias, maestro!

[@vidamrr]

Usas el hook useNavigate para que cuando des click te lleve a otra ruta. Justo en el video está así para el menú porque si usas Link no hay forma de configurar la transición

[@luchotrea1727]

Perfecto, entendí! Gracias bro!

[@colommbiano]

está excelente tocayo! muchas gracias, seria bueno crear un custom hooks para hacer un modal que salga desde el origen asi como lo hace con las imagenes pero en ves de la imagenes que sea un modal, seria bueno en Qwik y en React 🙈

[@jesuschavarriaherbozo7485]

Buen video! Felicitaciones.

[@franzmiguelsalinas]

Genial. No conozco react, pero me quedó la parte de js puro. Gracias

[@tomasponce9409]

React le da sabor a tu vida XD

[@gustavopena99]

Nuevo suscriptor, excelente video!

[@sebaprogrammer]

Buen corte saco Milhouse Dev!!.. Excelente video.

[@vidamrr]

😂😂😂😂 pretenderé que fue un cumplido

[@sebaprogrammer]

@@vidamrr Por supuesto, nada de hate.. lo de milhouse es por la escencia visual no mas, pero importantes videos subes.

[@noeveronweb]

Muy buen tutorial🎉

[@Bulldog-Chelista]

Lo cambia todo 😮😮😮

[@adriankryeziu964]

Buen video, muy útil, muchas gracias

[@scyfox.]

Cuando crees que ya lo aprendiste todo... bam!! una nueva api y a la madrreee

[@cha290391]

Primer comentario Saludós

[@ramironavarrete1133]

Excelente video como siempre

[@miguelhuenupi]

Brother te lo juro que ésto está muy interesante pero creo que no entendí ni un carajo 😂 igual yo no soy programador ni informático, apenas estoy aprendiendo a crear webs pero me he apoyado de wordpress, llegué hasta aquí porque en pagespeed insights me lanza un diagnóstico sobre el tamaño excesivo del DOM y la verdura no sé cómo solucionarlo de otra manera más que metiéndome a programar, pero no sé, no quiero estropear todo lo que he hecho, de casualidad sabes si es posible establecer una profundidad máxima del DOM sin meterme a los códigos?? Desde ya muchas gracias, soy un total novato en esto ❤

[@josecasanova3502]

Muy interesante, gracias por el video

[@Henry_Nunez]

Muy interesante. Quiero mas videos pero sin REACT 👏

[@lughstarlight]

Buen video. Podrías hablar sobre lo que dicen que Chrome dejara de usar las cookies y en que puede afectarnos 😱

[@elsebaz96]

Hola cuál es tu color syntax ?

[@gonzalo_dev]

Vue tiene componentes q se parecen y te da clases para hacer animaciones, luce mas sencillo en vanilla

[@vidamrr]

Si, muchas librerías hacen más o menos lo mismo pero ahora se puede hacer de forma nativa y sin configurar muchas cosas 🙌🏼

[@enriquealejand26]

tambien es posible que yo le de click a una imagen y se anime en otra ruta?

Que gran video, y esta excelente esta nueva API, ojalá se soporte completamente pronto. Aquí tengo una duda, para reemplazar estas transiciones "nativas" como lo harías? considerando mantener un buen manejo del DOM, ojalá me puedas dar una mano con un tip, saludos! 🤘🏽

[@vidamrr]

Puedes crear tus propias animaciones con @keyframe. En el blog de Google viene un ejemplo de cómo simular el efecto qué hay en Android cuando pasas de una vista a otra, pero si tiene su chiste

@@vidamrr Excelente, te agradezco mucho!

[@TheEmanuel15x]

una pregunta, para hacer una view transition entre paginas con react-router-dom y ademas que también se vea afectado ciertos elementos, solo tendria que agregarle el mismo viewTransitionName a los elementos y funcionaria como en el ejemplo? es decir escalaria los elementos nuevos, y los elementos con el mismo name, haria la animación ?

[@TheEmanuel15x]

ya pude hacerlo jaja gracias por la data. tuve que verlo 2 veces!! jaja

[@colommbiano]

Con NextJs cómo sería?

[@YeyeDark]

Excelente video, sabes si se puede usar cambiando de ruta ? Es decir que pase del /home a /detalle/1 y que funcione ?

[@vidamrr]

Si, Justo así lo hice en el video, ya si quieres algo más personalizado es meterte al CSS a crear animaciones pero recordando lo de mantener los view transition name en el cambio

[@codeend]

Esta bien bueno 👌, alguien sabe cómo se llama el tema de VS Code que usa?

[@maximilianolencina8150]

Muy buena API!

[@emmanuelrojasmusica]

Sii más apis

[@kikemore3451]

ahora todo estilo powerpoint

[@vidamrr]

Jajaja Justo asi he visto que presentan ella API, mutando el DOM ora que parezcan slides de PowerPoint

[@kikemore3451]

Ya me imagino un login dando vueltas y escapando del puntero del mouse jijij

[@fernandomoran3163]

​@@vidamrrhas usado la api observer en react? Me gustaría saber

[@leonardocurbelobetancort430]

Es interesante, pero aún no lo voy a implementar.

[@code_castle]

Que tal si te lanzas un hook que haga todo eso y nos deja el code ❤

[@vidamrr]

No estaría nada mal!!! 😎👍🏻👍🏻

[@rickkk226]

No entiendo que sentido tiene utilizar librerías, frameworks, o hacer cosas raras para hacer cosas que se pueden hacer con CSS y JS.