Angular 17 View Transitions API: Create smooth transition animations in a few steps!

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ม.ค. 2025

ความคิดเห็น • 44

  • @metalllus
    @metalllus 2 หลายเดือนก่อน

    this is so simple yet so powerful, thx a lot man!!

    • @ZoaibKhan
      @ZoaibKhan  2 หลายเดือนก่อน

      Glad it helped!

  • @kylerjohnson988
    @kylerjohnson988 10 หลายเดือนก่อน +1

    You’re a talented content creator. Great presentation of information and great pacing.

    • @ZoaibKhan
      @ZoaibKhan  10 หลายเดือนก่อน +1

      Hey Kyler! It's good to hear validation from a fellow developer. Your comment just made my day :)
      The View Transitions API is really cool!

  • @LePhenixGD
    @LePhenixGD 11 หลายเดือนก่อน +1

    Very clear tutorial, you're amazing !

    • @ZoaibKhan
      @ZoaibKhan  11 หลายเดือนก่อน

      Glad it was helpful! ☺️

  • @tornyu
    @tornyu 7 หลายเดือนก่อน +1

    Please check your sound levels: that Subscribe sound effect was _way_ too loud compared to your voice. Quite a shock.
    Great explanation tho, thanks for the video.

    • @ZoaibKhan
      @ZoaibKhan  7 หลายเดือนก่อน +1

      Oops, apologies for that! Will try to adjust audio if possible. Glad to know you found the video helpful :)

  • @yahyarabii5514
    @yahyarabii5514 9 หลายเดือนก่อน

    thank you so much you helped me alot

  • @sanchessantos7153
    @sanchessantos7153 ปีที่แล้ว

    Thanks Zoaib! Very nice!

    • @ZoaibKhan
      @ZoaibKhan  ปีที่แล้ว

      Glad you liked it! :)

  • @alantansa9
    @alantansa9 4 หลายเดือนก่อน

    Is this supported in older Android 10 Chrome browsers?

    • @ZoaibKhan
      @ZoaibKhan  4 หลายเดือนก่อน

      Seems so. Check here:
      caniuse.com/?search=view%20transition

  • @GabrielGuerreroIssa
    @GabrielGuerreroIssa 7 หลายเดือนก่อน

    Great video

  • @stpbstp
    @stpbstp ปีที่แล้ว

    How to use 'withViewTransitions' I my project is modular and not standalone?

    • @EvilazioVFX
      @EvilazioVFX ปีที่แล้ว

      Use angular 17. And put viewTransitionEnabled: true in your RouterModule.forRoot

    • @ZoaibKhan
      @ZoaibKhan  ปีที่แล้ว

      Exactly, thanks!

  • @kelvinokuroemi
    @kelvinokuroemi ปีที่แล้ว

    Hey Chief, thank you very much for your video.
    I'm also curious how you managed to section each video like "Map" videos only showing map videos when you click on the "Map" option.

    • @ZoaibKhan
      @ZoaibKhan  ปีที่แล้ว

      I'm searching in the tag with # in the description of the video. So only videos with desc having #map will appear for map.

    • @kelvinokuroemi
      @kelvinokuroemi ปีที่แล้ว

      Thank you very much Chief@@ZoaibKhan. The thing is when I click on any of the other options, no video show again.
      However when I click on the "all" tag, all the videos show.

  • @AnkitTannaVlogs
    @AnkitTannaVlogs ปีที่แล้ว

    great explanation... I had a doubt in the view-transition-name but this video clears it. will this work with query parameter or it has to be a route variable?

    • @ZoaibKhan
      @ZoaibKhan  ปีที่แล้ว

      Thanks Ankit! About query parameters, I'm not really sure. Will have to try it out :)

  • @AdemGanouni
    @AdemGanouni ปีที่แล้ว

    this application is what i need to lear about , please sir im new in learning angular and it's really hard to find tutorials like your style . can you do a full tutorial about this app from scratch and focus in all details ! if you can you will help me a lot , thank you !

    • @ZoaibKhan
      @ZoaibKhan  ปีที่แล้ว

      Sure! Can't promise when, but next up will be this one

  • @luisberoiza227
    @luisberoiza227 ปีที่แล้ว

    Wonderful!
    Thanks, bro!
    I tried View Transition on Astro and it was amazing.
    Now I am programming on Angukar and I was wondering if it support this feature.
    thanks!

    • @ZoaibKhan
      @ZoaibKhan  ปีที่แล้ว +1

      Yeah, kudos to the Angular team for making it so seamless and quick!

    • @luisberoiza227
      @luisberoiza227 ปีที่แล้ว

      @ZoaibKhan you have right, it is really easy to use.

  • @hvbairagi
    @hvbairagi 11 หลายเดือนก่อน

    Make a video for this project

    • @ZoaibKhan
      @ZoaibKhan  11 หลายเดือนก่อน

      Ok, sure. Will be creating a brief overview of the code.

  • @RahulShaw-v1g
    @RahulShaw-v1g ปีที่แล้ว

    Awesome, sir can you make more vidoes on angular view transitions api?

    • @ZoaibKhan
      @ZoaibKhan  ปีที่แล้ว

      Sure, but it is quite simple for now and I think I've covered most in this video. What more would you like me to cover?

  • @muhammadtariq8323
    @muhammadtariq8323 ปีที่แล้ว

    Will you Share Sample Code - github link ?

    • @ZoaibKhan
      @ZoaibKhan  ปีที่แล้ว

      Sure, here it is:
      github.com/thisiszoaib/angular-view-transitions-app
      Make sure to change the playlists and API key for your list of videos.

    • @ManasKumar-t2j
      @ManasKumar-t2j ปีที่แล้ว

      ​@@ZoaibKhan , can you please share your API key and playlist id too

    • @ZoaibKhan
      @ZoaibKhan  ปีที่แล้ว +1

      Hey! You can follow the link below to get your own API key. I'll be unable to share my key because will run out of quota :)
      developers.google.com/youtube/v3/getting-started
      For the playlist IDs, here are some from my channel. You can get any channel's playlist ID from the URL itself.
      PLHbz-DWIAPJDxWTyoq0O2v4T3AO5W94vl
      PLHbz-DWIAPJAkAKmKr4AkIeqUgnvcxLXF
      PLHbz-DWIAPJCltAty1all8WIQ2p9IVh6C

    • @ManasKumar-t2j
      @ManasKumar-t2j ปีที่แล้ว

      @@ZoaibKhan Thanks , it worked

  • @rfryanfavour4369
    @rfryanfavour4369 ปีที่แล้ว +2

    PLEASE MAKE A VIDEO OF HOW YOU BUILT THIS APP FROM SCRATCH, ESPECIALLY WITH THIS TH-cam API THING 😭 😭

    • @ZoaibKhan
      @ZoaibKhan  ปีที่แล้ว +1

      Ok, sure 👍

  • @LarsRyeJeppesen
    @LarsRyeJeppesen 9 หลายเดือนก่อน

    Cool

  • @mahdiandalib186
    @mahdiandalib186 ปีที่แล้ว

    thx man

    • @ZoaibKhan
      @ZoaibKhan  ปีที่แล้ว

      Welcome Mahdi!

  • @EstherSoftwareDev
    @EstherSoftwareDev ปีที่แล้ว

    cool :)

    • @ZoaibKhan
      @ZoaibKhan  ปีที่แล้ว

      It is very cool, indeed! :)