Great video and great explanations. At 17:37, your fade-in didn't work - the element simply appeared. Fade-out worked fine. If you look at the code at 17:22, the void => * transition should be an ease-in, shouldn't it (line 1, but the line numbers are confusing).
Hey I think that last example you have little bug ;-) shouldn't it be like this: ` transition('void => *', [style({ opacity: 0 }), animate('1s ease-in')]), //enter` `transition('* => void', [animate('1s ease-out'), style({ opacity: 0 })]), //leave` Am i right ?
if a user menu is beeing created and destroyed, should i make a decision to use angular animations? or rewrite the menu to just display none and use css visibility for animate the opacity?
Curious, if this is anyway more performant if you just put a class on it? In Angular1 the isShown value would trigger the class to fade in, no extra code needed. just the boolean, the css and the ng-class on the target. the callback called from the watcher of the isShown.
How to fix :leave animation not working when the component is being destroyed? The most relevant answer was from StackOverflow and the answer said to use hostbindings, but that bleeds out to the whole component which is not ideal for a modal transition. Updated: I fixed it using settimeout plus ngIf, but ideally it should automatically do that onDestroy
OK first 30 seconds and my mind was already blown. I thought Angular Animations used the Web Animatons API, therefore as performant as CSS Animations? if not more so. Ack! am I all confused? (Love your paid interview prep course by the way)
![แฉกลโกงงานวัด 2024 [ โกงมั้ยครับ ep.106 ] | DOM](http://i.ytimg.com/vi/taC5dpP3HXA/mqdefault.jpg)
WATCH NEXT: Angular with NgRx - Building Angular Project From Scratch - th-cam.com/video/vcfZ0EQpYTA/w-d-xo.htmlsi=BptT7eqgflHIoQiQ
Im working with angular for 2 years now (self thaught) and this is the most accurate animations guide I have seen in this whole time
+1 subscriber
Awesome!
Finally, I learnt Angular animations with this video and immediately implemented it in my project. Thank you for sharing!
Great to hear!
Great content. Always wanted a comprehensive tutorial on Angular animation. Thanks
Great to hear!
Great video and great explanations. At 17:37, your fade-in didn't work - the element simply appeared. Fade-out worked fine. If you look at the code at 17:22, the void => * transition should be an ease-in, shouldn't it (line 1, but the line numbers are confusing).
Thank you!
Your accent is really good to understand to non native speakers
Thank you!
explanation with examples + tips n tricks , perfection
Thanks! 😃
Hey
I think that last example you have little bug ;-)
shouldn't it be like this:
` transition('void => *', [style({ opacity: 0 }), animate('1s ease-in')]), //enter`
`transition('* => void', [animate('1s ease-out'), style({ opacity: 0 })]), //leave`
Am i right ?
Yeap, looks correct
I just wanted to animate one of my learning projects. This video is so in time!
Thanks)
Great!
Superb tutorial on Angular animations. Thanks
Glad you liked it
Great! Could you create second part to describe params for animations and maybe somwthing else?
Thank you for the idea. I will add it to the list of videos.
What is the point of V2. The element is not removed from the Dom, so the animation can be done through css
great explanations!
Thank you!
if a user menu is beeing created and destroyed, should i make a decision to use angular animations? or rewrite the menu to just display none and use css visibility for animate the opacity?
css is always better
hello, thanks for your tutorial , it is very interesting,
Question : is thre a relation between isShown(boolean) and FadeIn / Fadeout Please ?
Yes it is based on isShown property
@@MonsterlessonsAcademy thanks you
Thank you, your videos help me a lot 🙂
Happy to hear that!
what is the IDE you're using?
It's Vim. Here is my video about that
th-cam.com/video/YrLiugDhCuk/w-d-xo.html
Curious, if this is anyway more performant if you just put a class on it? In Angular1 the isShown value would trigger the class to fade in, no extra code needed. just the boolean, the css and the ng-class on the target. the callback called from the watcher of the isShown.
Then it is just css animation triggered with a class change
Can this Animation be reusable like shared component? Great vid! Thx!
Of course. If it is just const property you can export transition from anywhere
WoooW.... I didnt know that you could do this
Glad you learned something new!
If you did a follow up with route animations that would be awesome please mate
I will add it to the list of future videos
great video, very informative. thanks
Glad it was helpful!
this sounds like a mob teaching angular,, turned out very good video,, LIKE
Thank you very much!
Can you provide crash course onMobx franework and Ant Design ? just like typescript course ?
Thanks for the idea!
Just Brilliant. I have a suggestion if you can make video about how to insert google maps or any maps for angular.
Thanks for the idea!
what is your text editor ?
It's vim. here is my video about it th-cam.com/video/YrLiugDhCuk/w-d-xo.html
Thanks a lot!
You're welcome!
Thanks
You are welcome!
Bro good video 🔥🔥
Thanks 💯
thanks bro
Welcome
How to fix :leave animation not working when the component is being destroyed? The most relevant answer was from StackOverflow and the answer said to use hostbindings, but that bleeds out to the whole component which is not ideal for a modal transition.
Updated: I fixed it using settimeout plus ngIf, but ideally it should automatically do that onDestroy
I didn't have such problem so I can't help
The second option is not accessible for screen readers, they will still able to read the div content if you just hide it using opacity
OK first 30 seconds and my mind was already blown. I thought Angular Animations used the Web Animatons API, therefore as performant as CSS Animations? if not more so. Ack! am I all confused?
(Love your paid interview prep course by the way)
Now they are not. They are JS animations.
thanks a lot, but you are Russian, right? Почему на русском не преподаете?)
No I'm not. Because I don't want to.