/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 vote275 views4 answers
Angular file upload app with django
Javascript AngularJS
1 vote269 views3 answers
This version of CLI is only compatible with Angular versions ^9.0.0-beta || >=9.0.0 <10.0.0, but Angular version 8.1.3 was found instead.
Javascript AngularJS
0 vote267 views1 answer
Angular form initialse
Javascript AngularJS
0 vote305 views1 answer
If else condition in angular if user enter string value in input integer
Javascript AngularJS
0 vote276 views1 answer
Angular generer guard
Javascript AngularJS
0 vote260 views1 answer
Angular http call caching issue even after no-cache
Javascript AngularJS
0 vote271 views1 answer
Add icon to angular
Javascript AngularJS
0 vote427 views1 answer
Mixed line chart for angular or react
Javascript AngularJS
8 votes276 views3 answers
Formgroup angular
Javascript AngularJS
1 vote283 views2 answers
Set route on button in angular
Javascript AngularJS