角度2 SwitchCase与淡入

问题描述：

嘿，大家我有麻烦试图让我的开关情况后，一个被调用淡入。角度2 SwitchCase与淡入

这是我的代码。如果我要在输入字段中输入正确的开关盒，我想能够淡出当前输入字段并淡入新的输入字段。

我会去解决这个问题吗？

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; 

    } 

}

答

结构的指令，例如ngSwitch，修改DOM，不隐藏元素。您可以查看Angular文档：https://angular.io/docs/ts/latest/guide/structural-directives.html#!#why-remove-rather-than-hide-。我认为你的目标应该是通过CSS（侧重于NgClass并添加'one'，'two'，'3'与其逻辑比较）或者仅由Angular（有一些动画实用程序）来实现。

角度2 SwitchCase与淡入

相关推荐