/Javascript/AngularJS/Angular tab change smooth transition

Angular tab change smooth transition

.mat-tab-body {
    animation: fade-out 0.5s;
    opacity: 0;
}
.mat-tab-body.mat-tab-body-active {
    animation: fade-in 0.5s;
    opacity: 1;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

Source: stackoverflow.com

Similar codes

0 vote332 views1 answer
Angular.fromJson
Javascript AngularJS
1 vote341 views2 answers
What is auth guard in angular
Javascript AngularJS
7 votes392 views3 answers
How to add query parameter to url in angular
Javascript AngularJS
10 votes384 views5 answers
Angularjs foreach
Javascript AngularJS
9 votes349 views1 answer
Angular ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
Javascript AngularJS
3 votes325 views2 answers
A class member cannot have the 'const' keyword angular
Javascript AngularJS
2 votes307 views2 answers
Ngmodel
Javascript AngularJS
0 vote356 views1 answer
How to specify max number of character angular mat input
Javascript AngularJS
5 votes331 views2 answers
Generate component with module angular 8
Javascript AngularJS
17 votes471 views2 answers
Angular random number between 1 and 10
Javascript AngularJS