CODEWITHSUNDEEP
angular-animations
Sam
Sam

Reputation: 1834

Final animation state is discarded at end of animation

I'm trying to animate an element at the :leave transition and I'm a bit baffled by its behaviour.

trigger('inOut', [
      transition(':enter', [
        style({'max-height': '0'}),
        animate(250, style({'max-height': '150px'}))
      ], { params: { maxHeight: '150px'}}),

So I would expect my element being animated to have a max-height of 15px set at the final frame of the animation... and left there! I can see the max-height being animated but then at the end its removed and the element scales to whatever height fits its content. Struggling to imagine how this is useful, am I doing something wrong?

Update - Resolved it with this

trigger('inOut', [
      state('void', style({'max-height': '0'})),
      state('*', style({'max-height': '{{maxHeight}}'}), { params: { maxHeight: '0px'}}),
      transition(':enter', animate(300)),
      transition(':leave', animate(250))
    ]),

Upvotes: 1

Views: 113

Answers (1)

br.julien
br.julien

Reputation: 3460

A way to solve this is to use a state for the end of the animation and (@animation.done) to trigger this state.

Here is a StackBlitz example.

app.component.html

<div [@routeAnimations]="state" (@routeAnimations.done)="onDone($event)" class="animate-div">
</div>

app.component.ts

import { trigger, style, state, animate, transition } from '@angular/animations';

@Component({
  animations: [
    trigger('routeAnimations', [
      state('done', style({
        maxHeight: '150px'
      })),
      transition(':enter', [
        style({ 'max-height': '0' }),
        animate(1000, style({ 'max-height': '150px' }))
      ], { params: { maxHeight: '150px' } })
    ])
  ]
})
export class AppComponent {
  state = '';
  onDone(event) {
    this.state = 'done';
  }
}

Upvotes: 1

Related Questions