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:

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

The desired functionality is as follows:

User clicks a button to display table.
Table smoothly slides into view from below a div.
More rows are added to table (could be a large number of rows)
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.
User Clicks button.
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?

The problem is related to the height being calculated only when the element is created. I don't think it's possible to force the animation API to compute it again. — Ploppy, Mar 31 '17 at 16:25
maybe this solution is helpful for you: https://stackoverflow.com/a/47492134/5155810 — Martin Cremer, Nov 26 '17 at 13:05
@canerandagio i think it fits perfectly. You can wrap anything with a changing height with it. — Martin Cremer, Jul 09 '20 at 11:47

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 31 '17 at 15:59

Pezetter

2,783
2
22
40

I think you have misunderstood, I already have my animation working to a degree. The problem comes from the fact that when you already in "true" state, you will not get another transition to "true" when rows are added. – Daniel Cooke Mar 31 '17 at 16:19
Okay I get it. Read a little to quickly. In that case, 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. – Pezetter Mar 31 '17 at 16:21
I will try again after the weekend and let you know. Thanks for your help! – Daniel Cooke Mar 31 '17 at 16:24

Angular2 Height Animation - same state transition

1 Answers1

Linked