是否有可能爲Angular 2的ng開關設置動畫

是否可以對此進行動畫製作？我的代碼是否有可能爲Angular 2的ng開關設置動畫

div([ngSwitch]="switchState") 
    ul(fxLayout="row", fxLayoutAlign="space-between", *ngSwitchCase="0") 
    some-list 
    ul(fxLayout="row", fxLayoutAlign="space-between", *ngSwitchCase="1") 
    second-list 
    ul(fxLayout="row", fxLayoutAlign="space-between", *ngSwitchCase="2") 
    third-list

實際開關功能工作正常這塊，我想描繪它，不過我不是很確定什麼CSS屬性的角度玩弄，我懷疑它甚而不在DOM存在的時候，那麼是否有可能爲DOM添加新的動畫？

來源

2017-02-03 Carlos Villalta

transition-duration將是一個很好的CSS屬性來嘗試。 –

這是什麼標記？ – Obaid

它看起來像帕格/玉。 –

是的，可以使用Angular2 animation system對ng-switch進行動畫製作。

您可以在文檔中閱讀更多關於它的內容，但其要點是您可以爲任何要添加到DOM的元素設置動畫。使用*ngSwitchCase時，元素將根據條件被刪除並插入到DOM中。此狀態被稱爲void狀態&您可以選擇在從void狀態轉換爲可見狀態時應用的動畫。

由於使用ngSwitch以下標記：

<div [ngSwitch]="val"> 
    <p *ngSwitchCase="true" [@enterTrigger]="'fadeIn'">Value is TRUE</p> 
    <p *ngSwitchCase="false" [@enterTrigger]="'fadeIn'">Value is FALSE</p> 
</div>

你可以在這樣的組件定義動畫：

@Component({ 
    selector: 'my-app', 
    animations: [ 
    trigger('enterTrigger', [ 
    state('fadeIn', style({ 
     opacity: '1', 
     transform: 'translateY(50%)' 
    })), 
    transition('void => *', [style({opacity: '0'}), animate('500ms')]) 
    ]) 
    ] 
})

這裏void => *轉變決定了，因爲它移動的元素將被動畫從void狀態到任何狀態（包括變得可見）

Plunkr演示：https://plnkr.co/edit/IPLImRt34esClBg1HZdm?p=preview

P.S.不要忘記安裝@angular/animations

來源

2017-02-03 07:26:31 Obaid

非常感謝！這工作！我不能upvote，沒有足夠的代表:) –

它似乎不工作了 – Ateik

是否有可能爲Angular 2的ng開關設置動畫

回答

相關問題