Angular: Flick (half flip) animation

Question

I have this vertical flip animation for my card with a front and back face

      animations: [
    trigger('cardFlick', [
      state('0', style({
        transform: 'none'
      })),
      state('1', style({
        transform: 'rotateX(-180deg)'
      })),
      transition('0 => 1', [
        animate('400ms')
      ]),
      transition('1 => 0', [
        animate('400ms')
      ])
    ])
  ]

But I want to do is animate a card flick. By that I mean that the card wont do a full flip but rather a half flip, change the content on the card, then flip back showing the back face. Of course this will mean that my card will only have one face where I switch between the content. How would I go about doing this?

With my previous attempts the problem is always the ngIf ruining the animation by being too fast. How can I delay ngIf or play the first animation state first then let ngIf switch the content before flipping back?

Answer 1

You can use the animation event done to run some code when the animation has finished by binding (@cardFlick.done).

For exemple :

<div [@cardFlick]="flicked ? '1' : '0'" (@cardFlick.done)="showFront =!showFront">
  <p *ngIf="showFront">front</p>
  <p *ngIf="!showFront">back</p>
</div>