Angular 4 animacja do wysokości *

Question

Byłem zaintrygowany czymś, co według mnie jest błędem w module animacji w Angular 4. Z animacjami w Angular 2.x zrobiłem animację, która animuje od wysokości * do stała wysokość. W Angular 2 działało to doskonale. 2. Z drugiej strony, użycie elementu Angular 4 powoduje, że wysokość elementu, do którego zastosowano animację, staje się nieprzewidywalna w przypadku ponownego uruchomienia animacji przed jej ukończeniem. Prawdopodobnie przyczyną problemu jest wysokość symbolu wieloznacznego (*). Oto fragment demonstracyjny, który może odtworzyć problem. Błąd może zostać uruchomiony, jeśli kliknij dwukrotnie element, kiedy jest w stanie * -wysokość:

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'; 
} 

Czy jest coś złego w jaki sposób animować wysokość wykorzystując wartość wieloznaczny, czy jest tam coś rzeczywiście źle z zachowaniem wysokości symboli wieloznacznych?

Answer 1

Pojawia się błąd: https://github.com/angular/angular/issues/15507

Widocznie ! jest „tajemnicą” wartość w 4.2.0-rc.1 która wydaje się rozwiązać ten problem, ale to nie wydaje się być czymś, co jest oficjalnie obsługiwany lub będą wspierane w oficjalne wydanie.

https://plnkr.co/edit/pZamSqPX9Vb4J6JL721u?p=preview pokazuje, że pracuje w 4.2.0-rc.1 z !, a potem po prostu przejść do config.js i przesiąść się 4.0.0 i zmienić ! powrotem do * zobaczyć jak to znowu jest wadliwy.