Add Fade effect to angular2 ng-bootstrap tabs

Question

can anyone help me to add fading effect on ng-bootstrap tabs. https://ng-bootstrap.github.io/#/components/tabs

Answer 1

Are you asking for something like this ? :

@Component({
  selector: 'your_component',
  animations: [
    trigger('fadeInOutTranslate', [
      transition(':enter', [
        style({opacity:0}),
        animate(300, style({opacity:1}))
      ]),
      transition(':leave', [
        style({transform: 'translate(0)'}),
        animate(300, style({opacity:0}))
      ])
    ])
  ],
  template: '<div [@fadeInOutTranslate] class="container"></div>',
})

don't forget to add import { transition, animate } from '@angular/core';

in case : https://angular.io/docs/ts/latest/guide/animations.html

Answer 2

Try This

in your app.component.ts file

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger("animationFedInFedOut", [
        transition("* => fadeIn", [
            style({ opacity: 0 }),
            animate(300, style({ opacity: 1 }))
        ]),
        transition("* => fadeOut", [
            animate(300, style({ opacity: 0 }))
        ])
    ])
]
})

export class AppComponent {
bindingVar = "";
fadeIn() {
    this.bindingVar = "fadeIn";
}

fadeOut() {
    this.bindingVar = "fadeOut";
}

fedEffect() {
    this.bindingVar == "fadeOut" ? this.fadeIn() : this.fadeOut();
}

hide() {
    this.fadeOut();
}
}

html code: in your app.component.html file

<tabset>
   <tab (select)="fedEffect()" class="active" heading="Tab 1"> 
    <div [@animationFedInFedOut]="bindingVar" >  tab Content 1</div>
   </tab>
   <tab (select)="fedEffect()" heading="Tab 2" >
    <div [@animationFedInFedOut]="bindingVar" >  tab Content 2</div>
   </tab>
</tabset>