2017-04-10 188 views
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狀態的錯誤可以被觸發通配符高度的行爲方式?

回答

2

似乎是一個錯誤: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,改變!*來看看它是如何再次的馬車。

+1

謝謝你們提到github問題,並描述對我的問題的修復:) – Tallang