Angular 17 View Transitions API: Create smooth transition animations in a few steps!
ฝัง
- เผยแพร่เมื่อ 15 ต.ค. 2024
- #Angular #ViewTransitions #animation
✨Get the code for this app for FREE at my shop!
zoaibkhan.lemo...
📽️ Full stack Angular + Firebase course (50% off):
www.udemy.com/...
✍️My blog for more free Angular posts:
zoaibkhan.com/...
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!
Very clear tutorial, you're amazing !
Glad it was helpful! ☺️
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.
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
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 :)
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!
thank you so much you helped me alot
PLEASE MAKE A VIDEO OF HOW YOU BUILT THIS APP FROM SCRATCH, ESPECIALLY WITH THIS TH-cam API THING 😭 😭
Ok, sure 👍
Thanks Zoaib! Very nice!
Glad you liked it! :)
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 :)
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?
Is this supported in older Android 10 Chrome browsers?
Seems so. Check here:
caniuse.com/?search=view%20transition
Great video
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
Cool
Make a video for this project
Ok, sure. Will be creating a brief overview of the code.
thx man
Welcome Mahdi!
cool :)
It is very cool, indeed! :)