フェードインの角度2のスイッチケース

Question

誰もが私のスイッチのケースを消すために問題を抱えています。

これは私のコードです。入力フィールドの右のスイッチケースに入力すると、現在のフィールドをフェードアウトして新しいフィールドをフェードインできます。

私はそのことについて話しますか？ 0123のような

HTML

<input type="text" class="form-control" (keyup)="changeData()" [(ngModel)]="name" placeholder="write here"> 
<p>Now Displaying {{name}}</p> 
<div [ngSwitch]="switcher"> 
    <div *ngSwitchCase="'one'" [ngClass]="{'myfadeIn': fadeIn}"> 
     <p>switch case one</p> 
    </div> 
    <div *ngSwitchCase="'two'" [ngClass]="{'myfadeIn': fadeIn}"> 
     <p>switch case two</p> 
    </div> 
    <div *ngSwitchCase="'three'" [ngClass]="{'myfadeIn': fadeIn}"> 
     <p>switch case three</p> 
    </div> 
</div> 

CSS

.myfadeOut{ 
    opacity: 0; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
} 


.myfadeIn{ 
    opacity: 1; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
} 

ANGULAR2

import { Component } from "@angular/core"; 

@Component({ 
    selector: "home", 
    styleUrls: ['client/modules/home/home.component.css'], 
    templateUrl: `client/modules/home/home.component.html` 
}) 
export class HomeComponent { 
    switcher = "one"; 
    name; 

    fadeIn = true; 

    constructor() { 

    } 

    changeData(){ 
     this.switcher = this.name; 

    } 

} 

Answer 1

構造ディレクティブ、、要素を非表示にするのではなく、DOMを変更します。角度のある文書：https://angular.io/docs/ts/latest/guide/structural-directives.html#!#why-remove-rather-than-hide-をご覧ください。

あなたの目標は、CSS（NgClassに焦点を当て、そのロジックに「1」、「2」、「3」の比較を追加する）またはAngular（アニメーションユーティリティがいくつかあります）だけで達成する必要があると思います。