Angular2 Height Animation - same state transition

Question

I have the following animation code attached to my component

animations:[
        trigger('slide', [
            state('show', style({
                height: '*'
            })),
            state('hide', style({
                position: 'relative',
                height: 0,
                overflow: 'hidden'
            })),
            transition('show <=> hide',animate('130ms ease-out'))
        ])
    ]

This is quite hard to explain, (and I can't seem to get animations to work on plunker) but here goes.

The current functionality is as follows:

1. User clicks a button to display table.
2. Table smoothly slides into view from below a div.
3. User click button again.
4. Table smoothly slides out of the view up into the div.

The desired functionality is as follows:

1. User clicks a button to display table.
2. Table smoothly slides into view from below a div.
3. More rows are added to table (could be a large number of rows)
4. Animation handles the new table height and instead of just instantly being displayed there is a smoothing animation to gradually move to the new height.
5. User Clicks button.

6. Table slides back up under div again.

   Edit: here is a plunker demo. You can see when you add/remove rows from the table the animation does not smoothly move to the new height.

The problem is caused because if you are in true state and rows are added.

The animation will not transition to true again, because it is already in true state.

So how will I trigger a transition to the "newHeight" state when items are added?

Answer 1

I made a quick, rough, animation example using angular animations API:

https://embed.plnkr.co/7qWuHmbFFie4p8Y9h53T/

I would play around with that plnkr until you get the animations right. You can hide the element behind something by either removing the table entirely after animating it down by toggling the animation with an *ngIf in your template, or do it the way I show in the plnkr, but toggle the visibility of the table after the animation is complete. I prefer the *ngIf way.

For individual rows being added or removed:

I would add an @animation to every row of the table and enable the up animation if the number of rows increases, or down if it decreases.