Hi everyone, I'm facing an issue with making my switch cases fade in after one is called.
Here's what I have so far. When the correct switch case is entered in the input field, I want the current one to fade out and the new one to fade in.
How can I achieve this?
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;
}
}