Angular 17 View Transitions API: Create smooth transition animations in a few steps!
Вставка
- Опубліковано 7 гру 2023
- #Angular #ViewTransitions #animation
✨Get the code for this app for FREE at my shop!
www.buymeacoffee.com/zoaibkha...
📽️ Full stack Angular + Firebase course (50% off):
www.udemy.com/course/angular-...
✍️My blog for more free Angular posts:
zoaibkhan.com/blog
Learn how to enable and use the new View Transitions API support in Angular v17 with a videos app!
Follow for more Angular tutorials, tips and tricks:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
Cheers :) - Наука та технологія
thank you so much you helped me alot
Great video
Thanks Zoaib! Very nice!
Glad you liked it! :)
Very clear tutorial, you're amazing !
Glad it was helpful! ☺️
You’re a talented content creator. Great presentation of information and great pacing.
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!
Cool
thx man
Welcome Mahdi!
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 !
Sure! Can't promise when, but next up will be this one
PLEASE MAKE A VIDEO OF HOW YOU BUILT THIS APP FROM SCRATCH, ESPECIALLY WITH THIS UA-cam API THING 😭 😭
Ok, sure 👍
cool :)
It is very cool, indeed! :)
Awesome, sir can you make more vidoes on angular view transitions api?
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?
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!
Yeah, kudos to the Angular team for making it so seamless and quick!
@ZoaibKhan you have right, it is really easy to use.
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?
Thanks Ankit! About query parameters, I'm not really sure. Will have to try it out :)
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.
I'm searching in the tag with # in the description of the video. So only videos with desc having #map will appear for map.
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.
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.
Oops, apologies for that! Will try to adjust audio if possible. Glad to know you found the video helpful :)
How to use 'withViewTransitions' I my project is modular and not standalone?
Use angular 17. And put viewTransitionEnabled: true in your RouterModule.forRoot
Exactly, thanks!
Make a video for this project
Ok, sure. Will be creating a brief overview of the code.
Will you Share Sample Code - github link ?
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.
@@ZoaibKhan , can you please share your API key and playlist id too
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
@@ZoaibKhan Thanks , it worked