LA NUEVA FORMA DE MANEJAR EL DOM - View Transition API

Поделиться
HTML-код
  • Опубликовано: 1 окт 2024

Комментарии • 46

  • @risehit
    @risehit Год назад +5

    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

  • @scyfox.
    @scyfox. Год назад

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

  • @miguelhuenupi
    @miguelhuenupi Год назад +1

    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 ❤

  • @rickkk226
    @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.

  • @leonardocurbelobetancort430
    @leonardocurbelobetancort430 Год назад

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

  • @colommbiano
    @colommbiano Год назад

    Con NextJs cómo sería?

  • @earlpokercs8460
    @earlpokercs8460 Год назад +1

    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

  • @elsebaz96
    @elsebaz96 Год назад

    Hola cuál es tu color syntax ?

  • @Bulldog-Chelista
    @Bulldog-Chelista Год назад

    Lo cambia todo 😮😮😮

  • @noeveronweb
    @noeveronweb Год назад

    Muy buen tutorial🎉

  • @cha290391
    @cha290391 Год назад +1

    Primer comentario Saludós

  • @colommbiano
    @colommbiano Год назад +1

    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 🙈

  • @emmanuelrojasmusica
    @emmanuelrojasmusica 8 месяцев назад

    Sii más apis

  • @gonzalo_dev
    @gonzalo_dev Год назад +3

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

    • @vidamrr
      @vidamrr  Год назад +1

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

  • @kikemore3451
    @kikemore3451 Год назад +3

    ahora todo estilo powerpoint

    • @vidamrr
      @vidamrr  Год назад +2

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

    • @kikemore3451
      @kikemore3451 Год назад

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

    • @fernandomoran3163
      @fernandomoran3163 Год назад

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

  • @codeend
    @codeend Год назад

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

  • @adriankryeziu964
    @adriankryeziu964 Год назад

    Buen video, muy útil, muchas gracias

  • @enriquealejand26
    @enriquealejand26 Год назад

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

  • @yassir-amzel
    @yassir-amzel Год назад

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

  • @gustavopena99
    @gustavopena99 Год назад

    Nuevo suscriptor, excelente video!

  • @jesuschavarriaherbozo7485
    @jesuschavarriaherbozo7485 Год назад

    Buen video! Felicitaciones.

  • @TheEmanuel15x
    @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
      @TheEmanuel15x Год назад

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

  • @josecasanova3502
    @josecasanova3502 Год назад

    Muy interesante, gracias por el video

  • @YeyeDark
    @YeyeDark Год назад

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

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

  • @luchotrea1727
    @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
      @vidamrr  Год назад +1

      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
      @luchotrea1727 Год назад

      Perfecto, entendí! Gracias bro!

  • @franzmiguelsalinas
    @franzmiguelsalinas Год назад +4

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

  • @Henry_Nunez
    @Henry_Nunez Год назад +3

    Muy interesante. Quiero mas videos pero sin REACT 👏

  • @ramironavarrete1133
    @ramironavarrete1133 Год назад

    Excelente video como siempre

  • @maximilianolencina8150
    @maximilianolencina8150 Год назад

    Muy buena API!

  •  Год назад

    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
      @vidamrr  Год назад +1

      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!

  • @code_castle
    @code_castle Год назад

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

    • @vidamrr
      @vidamrr  Год назад +2

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

  • @Sebacodex
    @Sebacodex Год назад

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

    • @vidamrr
      @vidamrr  Год назад +1

      😂😂😂😂 pretenderé que fue un cumplido

    • @Sebacodex
      @Sebacodex Год назад

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