如何有條件地添加動畫在角2

我有了字段的表單組件，有些領域我想動畫，當他們出現在的形式，但不是每一個領域。如何有條件地添加動畫在角2

<div *ngFor="let field of form.Fields"> 
    <div [ngSwitch]="field.Type" [@slideOut]> 
     <!-- more field stuff --> 
    </div> 
</div>

與其他屬性，我可以做這樣的事情[attr.required]="field.Required"但[[email protected]]似乎並沒有工作。

理想情況下，我想在我的領域有一個動畫屬性，所以我可以通過這樣的動畫[@field.Animation]，但我找不到任何文件，我會做這樣的事情。有任何想法嗎？

來源

2017-04-14 Devcon

slideOut中的動畫狀態是什麼？你應該使用類似[@slideOut] =「」或類似的，其中STATE_NAME可動態確定（通過它返回一個名稱的方法EG）或靜態（如只是一個硬編碼字符串） – danimal

我可以嘗試像那，現在slideOut是一個void => *動畫。 – Devcon

然後開始設置[@slideOut] =「'測試'」或類似的 - 你的動畫def中的*應該選取它！ – danimal

我已經遇到了類似的問題，發現你需要採取稍微不同的方法。

在折角，動畫鏈接到狀態。因此，您不希望在HTML中爲動畫定義不同的觸發器，而是需要定義觸發器可以在組件類中監控的多個狀態。並非直接從方法觸發動畫，而是設置動畫鏈接到的對象的狀態。

因此，舉例來說，我可能在導入必要的模塊之後定義的組件裝飾以下。

@Component({ 
    selector: 'app-some-animated', 
    templateUrl: './some.component.html', 
    styleUrls: ['./some-animated.component.scss'], 
    animations: [ 
    trigger('flyInOut', [ 
     transition("void => fly", [ 
     animate(300, keyframes([ 
      style({transform: 'translateX(100%)', opacity: 0}), 
      style({transform: 'translateX(0)', opacity: 1}) 
     ])) 
     ] 
    ) 
    ]), 
    trigger('flyInOut', [ 
     transition("void => fade", [ 
      animate(300, keyframes([ 
      style({opacity: 0}), 
      style({opacity: 1}) 
      ])) 
     ] 
    ) 
    ]) 
    ] 
})

在這個例子中，我一旦元素被實例化，動畫就會發生。在ngOnInit（）方法中，我將this.watchMe設置爲「飛行」或「淡入淡出」。

在HTML我附加了flyInOut觸發像這樣：

<div [@flyInOut]="watchMe"> 
    Some content... 
</div>

你的情況，你可能想所需的狀態添加到您的領域對象或從你的* ngFor可迭代的條件。

This article從coursetro有一個很好的解釋和視頻了。

來源

2017-07-04 16:25:43 user2528534

我接受這個答案是因爲它是我找到的唯一方法。我不喜歡必須管理動畫狀態，尤其是在這種情況下，因爲我必須爲數組中的每個項目執行此操作。我覺得角度有這兩種形式的動畫（實例和狀態）很奇怪。我也不喜歡角色團隊如何動態添加的唯一屬性：P Ohh well – Devcon

同意這是一個非常棒的解決方案。但是這是Angular，通常感覺你並沒有真正開發配置別人的代碼。 – user2528534

您能否添加一個組件功能的例子來改變watchme的狀態？ – tatsu

如何有條件地添加動畫在角2

回答

相關問題