Estoy tratando de voltear la tarjeta con animación, pero solo voltea instantáneamente, no puedo ver la transición.

Mi HTML:

 <div class="tp-wrapper"> <div class="tp-box" (click)="toggleFlip()" [@flipAnimation]="flipState"> <div class="tp-box__side tp-box__front"> <img class = "foto" src='src'> </div> <div class="tp-box__side tp-box__back">name </div> </div> </div>

Mecanografiado:

 import { Partida, Prueba } from './../../../utils/models/PartidaModel'; import { Component, Input, OnInit } from '@angular/core'; import { trigger, state, style, transition, animate } from '@angular/animations'; import { constants } from 'src/app/utils/constants'; @Component({ selector: 'app-card', templateUrl: './card.component.html', styleUrls: ['./card.component.css'], animations: [ trigger('flipAnimation', [ state('active', style({ transform: 'rotateY(179deg)' })), state('inactive', style({ transform: 'rotateY(0)' })), transition('active => inactive',[ animate('1000ms ease-out')]), transition('inactive => active',[ animate('1000ms ease-in')]) ]) ] }) export class CardComponent implements OnInit { @Input() prueba : Prueba; @Input() partida : Partida; flipState: string = 'inactive' ; constructor() { } ngOnInit() { console.log(this.prueba); } toggleFlip() { this.flipState = (this.flipState == 'inactive') ? 'active' : 'inactive'; }

Al hacer clic en la tarjeta, puedo ver la parte posterior de la tarjeta, pero quiero ver cómo se voltea usando la Transición Angular