Thanks for really helpful tutorials on animations. Angular docs on animations are pretty much garbage (at least when I'm trying to actually learn them) and your tutorials with minimal code makes it really easy to understand! (btw allPlayers variable isn't actually allPlayers but all beside first one so more like allPlayersBesideFirstOne, but hey maybe that's me - obviously for purposes of this tutorial that doesn't really matter)
Trying to implement this, but I feel that I am having issues with the binding. Is this a new addition to the animation package as I believe I am using an an older version? animations: [ trigger('slideInOut', [ transition('* *', [ query(':enter', [ style({ transform: 'translateX(-100%)' }), animate('300ms ease-in', style({ transform: 'translateX(0%)' })) ]), query(':leave', [ animate('200ms ease-in', style({ transform: 'translateX(-100%)' })) ]) ]), ]) ] Could also be due to the fact I don't think I can do the for loop that you setup:
This is not a new feature. I'm curious the exact issue that you are facing. Could you provide a basic Stackblitz example? Then I could help troubleshoot.
@@briantreese Responded a couple times but I think my comments are getting flagged due to the link. Let me know if you got them. I think the issue is the for() in the html file. I am on angular 16 so I am using @ngFor which I think is causing issues Might have found the solution. I need to do [@slideInOut]="layerLinksInfo.length"
You could post the link in the comments on my blog post for this video if you want. I think that would work: briantree.se/angular-animations-tutorial-query-and-stagger/
Gracias por tomarte tu tiempo de hacer este video y explicar de la mejor manera!
Thanks for really helpful tutorials on animations.
Angular docs on animations are pretty much garbage (at least when I'm trying to actually learn them) and your tutorials with minimal code makes it really easy to understand!
(btw allPlayers variable isn't actually allPlayers but all beside first one so more like allPlayersBesideFirstOne, but hey maybe that's me - obviously for purposes of this tutorial that doesn't really matter)
Thanks for the feedback! I really love hearing when people find it useful!
Trying to implement this, but I feel that I am having issues with the binding. Is this a new addition to the animation package as I believe I am using an an older version?
animations: [
trigger('slideInOut', [
transition('* *', [
query(':enter', [
style({ transform: 'translateX(-100%)' }),
animate('300ms ease-in', style({ transform: 'translateX(0%)' }))
]),
query(':leave', [
animate('200ms ease-in', style({ transform: 'translateX(-100%)' }))
])
]),
])
]
Could also be due to the fact I don't think I can do the for loop that you setup:
This is not a new feature. I'm curious the exact issue that you are facing. Could you provide a basic Stackblitz example? Then I could help troubleshoot.
@@briantreese Responded a couple times but I think my comments are getting flagged due to the link. Let me know if you got them.
I think the issue is the for() in the html file. I am on angular 16 so I am using @ngFor which I think is causing issues
Might have found the solution. I need to do [@slideInOut]="layerLinksInfo.length"
Unfortunately I'm not getting them
You could post the link in the comments on my blog post for this video if you want. I think that would work: briantree.se/angular-animations-tutorial-query-and-stagger/
@@briantreese All good in the end, I figured it out. It was indeed needing to add .length to the end of my list when binding to the annimation