Angular 2+上的動畫變量

我在我的angular2 +組件上使用了一些動畫。它工作正常，但我想使用一些變量，而不是硬編碼值（'20px'，'10px'）。Angular 2+上的動畫變量

有沒有可能在動畫中使用一些typecript變量？

例如：

@Component({ 
selector: 'animationDialog', 
templateUrl: './animationDialog.component.html', 
styleUrls: ['./modal.component.css'], 
animations: [ 
    trigger('dialog', [ 
    state('enter', style({ 
    transform: 'translate(this.TYPESCRIPTVAR1, this.TYPESCRIPTVAR2)', 
    top: 'this.TYPESCRIPTVAR3', 
    height: 'this.TYPESCRIPTVAR4' 
    })), 
('leave', style({ 
    transform: 'translate(this.TYPESCRIPTVAR1, this.TYPESCRIPTVAR2)', 
    top: 'this.TYPESCRIPTVAR3', 
    height: 'this.TYPESCRIPTVAR4' 
    }))

目前代碼：

animations: [ 
trigger('dialog', [ 
    state('enter', style({ 
    transform: 'translate(0px, -80px)', 
    top: '200px', 
    height: '320px' 
    }))

我已經檢查另一個question，但這個問題只把一個變量的風格。就我而言，我在一個屬性上有一個可變的樣式（例如「background-color」），但是這些屬性在不同的狀態下是可變的。

謝謝。

來源

2017-05-11 R. Maier

[angular2動畫與可變樣式]可能的副本（http://stackoverflow.com/questions/38464236/angular2-animation-with-variable-styles） – zigzag

@zigzag感謝您的幫助。在這個鏈接中，他們只有一個屬性作爲變量。就我而言，所有屬性都應該是打字稿變量。 –

沒錯，但我不明白爲什麼如果一個樣式屬性可以通過變量引用，他們都不應該。 – zigzag

ng2不支持4.1.x中的動畫var。

來源

2017-05-31 10:45:58 tellxp

我想知道爲什麼這被標記爲公認的答案！ – M98

現在支持。 https://stackoverflow.com/questions/41966673/parameter-in-to-animation-angular2 – Irving

tellxp是對的。不幸的是，這是風格，但也爲持續時間，延遲和緩解。這些和樣式都必須是常規字符串或數字。

你應該做的是與模板本身的變量工作，通過

[style.background-color]="yourVarHere";

改變你的js var和照顧動畫在你的CSS。

.your-selector { background-color: #333; /* your default color */ transition: 300ms background-color; } 或者，如果你想照顧它與動畫的組件，使用的樣式： {background-color: '*'} 讀出當前的顏色。

我希望這有助於！

來源

2017-06-22 12:31:50 rnacken

Angular 2+上的動畫變量

回答

相關問題