He estado desconcertado con algo que posiblemente creo que es un error en el módulo de animación en Angular 4. Con las animaciones en Angular 2.x, hice una animación que anima desde la altura * hasta una altura fija. Esto funcionó perfectamente bien en Angular 2. Cuando se usa Angular 4, por otro lado, la altura del elemento al que se le ha aplicado la animación tiene errores cuando se vuelve a activar la animación antes de que se complete. La altura del comodín (*) es lo que parece estar causando el problema. Aquí hay un fragmento de demostración que puede reproducir el problema. El error se puede desencadenar si hace doble clic en el elemento cuando está en el estado de altura *:

 import { Component } from '@angular/core'; import { trigger, animate, state, transition, style } from '@angular/animations'; @Component({ selector: 'app-root', template: ` <h1 [@toggleAnimation]="isEnabled" (click)="isEnabled = isEnabled === 'active' ? 'inactive' : 'active'" style="background: blue"> {{title}} </h1>`, animations: [ trigger('toggleAnimation', [ state('active', style({ height: '*', })), state('inactive', style({ height: '600px', })), transition('active <=> inactive', animate('500ms ease-in-out')) ]) ] }) export class AppComponent { title = 'app works!'; isEnabled = 'inactive'; }

¿Hay algún problema con la forma en que animo la altura usando el valor comodín, o de hecho hay algún problema con la forma en que se comporta la altura del comodín?