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'，'three'与其逻辑进行比较）或仅仅通过Angular实现（有一些动画工具）。

带有淡入的Angular 2 SwitchCase

1 个答案: