Deployed adev-preview for 961cb6c to: https://ng-dev-previews-fw--pr-angular-angular-60984-adev-prev-c22fgdvu.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

Does this also allow transitions from and to auto height, between display hidden and flex/block/etc? Because that is currently the only reason I use the animations package, you can make it so that you do your transition and then close your animation by completely hide the element, or to show the element before doing the animation. And animating between auto-height depending on what is inside it, is also still a pain in the ass without a few new CSS features becoming mainstream. I feel that this is a bit too soon to completely dump the system before CSS has enough support for various items if that is not supported. And as far as I know with keyframes you don't have that yet? And with manually using transitionEnd eventlisteners is also not really all that clean. If Angular would replace this with directives around those transitions, it would make it a little cleaner since the adding/removing of eventlisteners is just tedious work that shouldn't be needed for this. And it also seems to me that if you want both enter and leave animations that are different, you also need more code than what makes sense.

To me it seems that this animations module is better off being forked for those that still prefer doing it this way, over completely removing it.

Hi, great job with the toturial!

1. It would be great if guide for using native CSS animations would be as close to 1:1 to original animation toturial as possible.
   For example, looking at original docs regarding animations I find that Automatic property calculation with wildcards
   is missing and could be handled by animate to height auto, or at least example from original toturial could. This is quite new feature, and not every dev know this feature.
2. Looking at point 1, it would be great if the sequence of sections would be the same but please keep as You provide examples with current aniamtions/native CSS animations examples as it is really easy to understand.

• Mayby some info how to use view transitions outside of router? Not sure if this is the place, but it is somehow related.
• How to do :leave animation with @HostBinding, so :leave animation on component itself which is much harder than doing this from parent element examle blog example stackblitz

4. kaiju no 8 kai
5. How nice of You to write such a nice guide instead of just puttin @deprecated next to animation API.

@kbrilla I chose not to make it fully 1:1, but close because some of the headings in the animation guide are either redundant or unnecessary in the case of pure CSS. I'll be adding a bit about animating to auto heights. On the view transitions front, I'd like to add more, but since scoped view transitions haven't landed yet, that'll be a future update. Per the hostbinding thing, I'll take a look. Thanks for the suggestion.

@Martinspire Actually the CSS platform has already added support for animating the types of things you are mentioning. Take a look at transition-behavior: allow-discrete. You can see the MDN docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior. And stay tuned for more on the future of animations in Angular. You can expect some updates coming soon.

@Martinspire Actually the CSS platform has already added support for animating the types of things you are mentioning. Take a look at transition-behavior: allow-discrete. You can see the MDN docs here: developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior. And stay tuned for more on the future of animations in Angular. You can expect some updates coming soon.

Very cool. I didn't know support was already that far with those. I think we do need a few more examples then to highlight these features because I'm sure people will be forgetting it.

Animating between 2 auto-height positions still seems like we need a better example for that too. There's also new CSS properties that can help with that, but I don't think we should be relying on CSS Grid to hack our way around it. Calc-size is coming but is still not there yet on Firefox and Safari, let alone older devices. Which is (to me) the moment where we can really drop this module. I just hope its not unsupported before that happens...

@Martinspire @kbrilla please take a look at this proof of concept regarding :leave animations on host. I also use Angular Animations solely for the :leave support, but given this direction I thought I'd dedicate some time to sketch out a solution that will work for me without this dependency:
https://stackblitz.com/edit/leave-animation?file=src%2Fapp%2Fleave.directive.ts
Would love to hear some inputs at potential downsides/issues of my idea.

@waterplea
Hi, I have taken a look and first some weird things happend ;)

But later on it started working.
Problem with this implementation is that You use parent renderer so it actually nests callbacks with each leave

Ok, more weird things after few more test runs. It appears that img 1 takes place every time new stackblitz is opened. Refreshing preview does not help. Only changing code make the img 2 take place. But refreshing preview breaks example again.
When it 'works' it does produce some warns though,

@kbrilla regarding first weird thing — you just got there in between me testing two different ideas :) The warnings are probably due to old stackblitz preset that does not work well with hot replacement. The multiple overrides is an interesting thing, we need it to make sure to test against current element. Maybe after removing the element we can return it back to the previous value, this way it will only have as many overrides as we currently have children with potential leave animation 🤔

EDIT: Updated stackblitz, now it should only override it once per child and return it back to the previous state upon removal, also no more potential memory leak with addEventListener

I like that it works as good as it does, ideally though, it should work without overriding anything in Renderer2. So mayby small addition to framework is needed?
I will stop here, and wait for @thePunderWoman take on it.

Yes, one other important thing is that it requires setting REMOVE_STYLES_ON_COMPONENT_DESTROY to false, that's why you saw issues with animations triggering at the wrong time.

@Martinspire @kbrilla please take a look at this proof of concept regarding :leave animations on host. I also use Angular Animations solely for the :leave support, but given this direction I thought I'd dedicate some time to sketch out a solution that will work for me without this dependency: stackblitz.com/edit/leave-animation?file=src%2Fapp%2Fleave.directive.ts Would love to hear some inputs at potential downsides/issues of my idea.

Ok, clear, but shouldn't Angular still have the groundwork to easily add this to ones project without reinventing the wheel? Can't the animations module continue as a library for providing either barebone setup for adding animations or more detailed one that can perhaps be lazyloaded and cherry picked? But yeah, animating items that are shown/hidden based on @if flow and then still properly do animations on entry/leave is something I would expect the framework to help me with so I don't need to reinvent it, even though the code could be small. Because by providing it, there is a chance it will become a standard and thus another "opinionated and batteries included" feature added to angular...

This PR was merged into the repository by commit f054c00.

The changes were merged into the following branches: main, 20.0.x