Angular CSS animations in 20.2 missing key functionality

[mark-akturatech]

Which @angular/* package(s) are relevant/related to the feature request?

core

Description

I am trying to convert our application to use the new Angular CSS animations. I love the idea and simple animations convert across very easily. Single use animations are also simply converted. The new animations are extremely elegant.

I have an issue with more complex re-usable animations though, specifically those that use AUTO_STYLE (I do know about the grid CSS trick).

Here is a simple example of an animation used everywhere in our application. It simply expands an inline element, pushing other inline content to the right as it expands. We have many other animations that also use AUTO_STYLE for them to work.

export const horizontalExpandAnimation: AnimationTriggerMetadata = trigger('horizontalExpandAnimation', [
  transition(
    ':enter',
    [
      style({ transform: 'scaleX(0)', width: 0, 'transform-origin': 'left' }),
      animate('{{ time }} ease-in-out', style({ transform: 'scaleX(100%)', width: AUTO_STYLE }))
    ],
    { params: { time: '250ms' } }
  ),
  transition(
    ':leave',
    [
      style({ transform: 'scaleX(100%)', 'transform-origin': 'left' }),
      animate('{{ time }} ease-in-out', style({ transform: 'scaleX(0)', width: 0 }))
    ],
    { params: { time: '250ms' } }
  )
]);

This can be replicated using CSS grid with 0fr to 1fr animation. However for this to work, i need two elements - the parent with the grid styling and the content that is being animated.

So my two options currently are:

1. Create a component that does the animation. This is a bit messy as now i need to add an additional component that wraps the various many elements that can be expanded.
2. Implicitly "know" that this animation type only works as a direct child of a specific class that i need to apply to the parent element.

Both of these options are not as elegant as putting @horizontalExpandAnimation on the element i want to expand.

Maybe I've missed something here as information is a bit sparse (understandably so as 20.2 is quite young) and the examples everyone provides are simplistic. I'm always happy to be told I'm wrong :)

Proposed solution

Could we have an animate.enter and .leave events include a copy of the content that angular is about to render in to the DOM so i can measure it?
I tried reading target in the enter event but this is provided without any children content, so is always width 0.

Alternatives considered

None that i can think of.

[kukjevov]

Solution for now is to use @calc-size() css function which works perfectly or just set up interpolate-size: allow-keywords;, only problem is Firefox, which does not support this yet, i hope they will support it soon. As workaround for Firefox is to use max-width or max-height and set it to something much larger than possible content. I fought with this on friday and this was only way i found how to do it correctly and least painlessly.

For example

    .slide-in
    {
        interpolate-size: allow-keywords;
        overflow: hidden;
        transition: all var(--slide-in-height-duration, 400ms) ease-in, 
                    opacity var(--slide-in-opacity-duration, 300ms) ease-in var(--slide-in-opacity-delay, 100ms);
        max-height: 1000px;

        @starting-style
        {
            height: 0;
            max-height: 0;
            opacity: 0;
            margin: 0;
            padding: 0;
            border-width: 0;
        }
    }

[thePunderWoman]

@mark-akturatech The new animate.enter and animate.leave are intended to be close to the pure CSS platform and is not intended to be a pure replication of the prior animation package API. We would recommend using the native APIs as suggested by @kukjevov or using the event binding to write your own code to do what you'd like with this type of behavior.