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 :) - วิทยาศาสตร์และเทคโนโลยี
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!
thank you so much you helped me alot
Very clear tutorial, you're amazing !
Glad it was helpful! ☺️
Thanks Zoaib! Very nice!
Glad you liked it! :)
Cool
thx man
Welcome Mahdi!
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 :)
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
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.
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.
PLEASE MAKE A VIDEO OF HOW YOU BUILT THIS APP FROM SCRATCH, ESPECIALLY WITH THIS TH-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?
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