带有淡入的 Angular 2 SwitchCase答案

【问题标题】：Angular 2 SwitchCase with Fade In带有淡入的 Angular 2 SwitchCase
【发布时间】：2017-02-04 15:43:10
【问题描述】：

大家好，我在尝试让我的开关盒在调用一个开关盒后淡入时遇到了麻烦。

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

我会这样做吗？

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;

    }

}

【问题讨论】：

标签： javascript css angularjs angular

【解决方案1】：

结构指令，如 ngSwitch，修改 DOM，而不是隐藏元素。您可以查看 Angular 文档：https://angular.io/docs/ts/latest/guide/structural-directives.html#!#why-remove-rather-than-hide-。

我认为您的目标应该仅通过 CSS（专注于 NgClass 并将那些“一”、“二”、“三”比较与其逻辑）或仅通过 Angular（有一些动画工具）来实现。

【讨论】：