角度2 SwitchCase與淡入

Question

嘿，大家我有麻煩試圖讓我的開關情況後，一個被調用淡入。

這是我的代碼。如果我要在輸入字段中輸入正確的開關盒，我想能夠淡出當前輸入字段並淡入新的輸入字段。

我會去解決這個問題嗎？

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

結構的指令，例如ngSwitch，修改DOM，不隱藏元素。您可以查看Angular文檔：https://angular.io/docs/ts/latest/guide/structural-directives.html#!#why-remove-rather-than-hide-。我認爲你的目標應該是通過CSS（側重於NgClass並添加'one'，'two'，'3'與其邏輯比較）或者僅由Angular（有一些動畫實用程序）來實現。