I am currently working with an animation code that is linked 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'))
])
]
Explaining this can be a bit challenging (and I'm having trouble getting animations to function on plunker) but here's my attempt.
The current function works as follows:
- User clicks a button to reveal a table.
- The table smoothly slides into view from beneath a div.
- User clicks the button again.
- The table smoothly slides out of view and up into the div.
The desired function is as follows:
- User clicks a button to display the table.
- The table smoothly slides into view from below a div.
- Additional rows are added to the table (which could be a substantial number).
- The animation adjusts to the new table height, ensuring a gradual transition to the new height instead of an instant display.
- User clicks the button.
The table slides back up under the div.
Edit: you can view a plunker demo here. You'll notice that when rows are added or removed from the table, the animation does not smoothly transition to the new height.
The issue arises when you are in the true state and new rows are added.
Since the animation is already in the true state, it won't transition to true again.
So how can I trigger a transition to the "newHeight" state when items are added?