角度4动画到高度*

我一直困惑的东西，我可能认为是在Angular 4动画模块中的错误。随着Angular 2.x中的动画，我做了一个动画，从高度*动画一个固定的高度。这在Angular 2中工作得非常好。另一方面，当使用Angular 4时，动画应用到它的元素的高度在动画完成之前重新触发动画时会变得越来越麻烦。通配符（*）高度似乎是导致问题的原因。这是一个可以重现问题的演示代码片段。角度4动画到高度*

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

是不是有什么毛病我怎么动画使用通配符值的高度，或者是有INFACT一些错误：如果您双击元素时，它是在* -height状态的错误可以被触发通配符高度的行为方式？

来源

2017-04-10 Tallang

似乎是一个错误：https://github.com/angular/angular/issues/15507

显然!是4.2.0-rc.1一个“秘密”价值这似乎解决这个问题，但是这似乎并没有被什么东西正式支持或将支持官方发布。

https://plnkr.co/edit/pZamSqPX9Vb4J6JL721u?p=preview它显示在4.2.0-rc.1正与!，然后只是去config.js并切换到4.0.0，改变!回*来看看它是如何再次的马车。

来源

2017-06-04 08:37:23

谢谢你们提到github问题，并描述对我的问题的修复:) – Tallang

角度4动画到高度*

回答

相关问题