8
我一直困惑的東西,我可能認爲是在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狀態的錯誤可以被觸發通配符高度的行爲方式?
謝謝你們提到github問題,並描述對我的問題的修復:) – Tallang