Можно ли анимировать ng-переключатель Angular 2

Question

Возможно ли это сделать? У меня есть этот блок кода

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 

функциональность фактического переключателя работает нормально, я хочу, чтобы оживить его, но Im не совсем уверен, что CSS свойство угловатыми играют с, я подозреваю, что в то время оно не существует даже в DOM, так можно ли анимировать новые дополнения к DOM?

Answer 1

Да, можно активировать ng-переключатель, используя Angular2 animation system.

Подробнее об этом можно узнать в документах, но суть в том, что вы можете анимировать любой элемент, добавляемый в 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 demo: https://plnkr.co/edit/IPLImRt34esClBg1HZdm?p=preview

P.S. Не забудьте установить @angular/animations