Angular 2+ flip animation not working properly with ngIf

Question

I want to implement a smooth card flip animation with ngIf

CODE: https://stackblitz.com/edit/angular-card-flip-2wj64j?file=app%2Fcard%2Fcard.component.html

current output:

==================CODE=================

HTML

<div class="tp-wrapper">
  <div class="tp-box" (click)="toggleFlip()">
    <div class="tp-box__side tp-box__front" *ngIf="front" @flipState>Front</div>
    <div class="tp-box__side tp-box__back" *ngIf="!front" @flipState>Back</div>
  </div>
</div>

ts

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

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css'],
  animations: [
    trigger('flipState', [
      state(
        'front',
        style({
          transform: 'rotateY(0deg)',
        })
      ),
      state(
        'back',
        style({
          transform: 'rotateY(180deg)',
        })
      ),
      transition(':enter', [
        animate(
          '1s 0s ease-in',
          keyframes([
            style({
              transform: 'perspective(400px) rotateY(0deg)',
              offset: 0,
            }),
            style({
              transform: 'perspective(400px) rotateY(80deg)',
              offset: 0.4,
            }),
            style({
              transform: 'perspective(400px) rotateY(100deg)',
              offset: 0.5,
            }),
            style({
              transform: 'perspective(400px) rotateY(180deg)',
              offset: 0.8,
            }),
            style({
              transform: 'perspective(400px) rotateY(180deg)',
              offset: 1,
            }),
          ])
        ),
      ]),
      // transition(':leave', [
      //    animate('1s 0s ease-in',
      //       keyframes([
      //          style({
      //             transform: 'perspective(400px) rotateY(0deg)',
      //             offset: 0
      //          }),
      //          style({
      //             transform: 'perspective(400px) scale3d(1.5, 1.5, 1.5) rotateY(-80deg)',
      //             offset: 0.4
      //          }),
      //          style({
      //             transform: 'perspective(400px) scale3d(1.5, 1.5, 1.5) rotateY(-100deg)',
      //             offset: 0.5
      //          }),
      //          style({
      //             transform: 'perspective(400px) scale3d(0.95, 0.95, 0.95) rotateY(-180deg)',
      //             offset: 0.8
      //          }),
      //          style({
      //             transform: 'perspective(400px) scale3d(1, 1, 1) rotateY(-180deg)',
      //             offset: 1
      //          })
      //       ]))
      // ])
    ]),
  ],
})
export class CardComponent implements OnInit {
  constructor() {}

  front = false;

  ngOnInit() {}

  flip: string = 'inactive';

  toggleFlip() {
    this.front = !this.front;
  }
}

scss

    .tp-wrapper {
      -webkit-perspective: 800px;
              perspective: 800px;
    }
    
    .tp-box {
      position: relative;
      width: 200px;
      height: 100px;
      margin: 3rem auto;
      -webkit-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transform         : transform 1s;
          -ms-transform         : transform 1s;
              transform         : transform 1s;
    }
    .tp-box__side {
       width: 100%;
      height: 100%;
      position: absolute;

      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;

      color: #fff;
      text-align: center;
      line-height: 100px;
      font-size: 24px;
      font-weight: 700;
      cursor: pointer;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }
    .tp-box__front {
      background: green;
    }
    .tp-box__back {
      background: #23262d;
    }

How I want to Acchive:

PLEASE NOTE: I WANT TO ARCHIVE THIS WITH CURRENT NGIF AND ANGULAR ANIMATION

Answer 1

I'm afraid that you can not get it using *ngIf nor :enter/:leave. Futhermore, you should remove all the transform 1s;in your .css

Your .html becomes like -see that the "animation" is related to the div "tp-box"

<div class="tp-wrapper">
  <div class="tp-box" (click)="flip=flip=='front'?'back':'front'" [@flipState]="flip">
    <div class="tp-box__side tp-box__front" >Front</div>
    <div class="tp-box__side tp-box__back" >Back</div>
  </div>
</div>

And your .tp-box__back have transform:rotateY(180deg)

.tp-box__back {
      background: #23262d;
      /* -webkit-transform : rotateY(-180deg); */
      /* -ms-transform     : rotateY(-180deg); */
      transform         : rotateY(-180deg);
    }

Your forked stackblitz

NOTE: in this another stackblitz you have a similar approach but using float:left and margin-right:-100% to not "force" the height of the "cards"

.card__face {
  float:left;
  width:100%;
  margin-right: -100%;
  backface-visibility: hidden;
}