[英]Add Fade effect to angular2 ng-bootstrap tabs
can anyone help me to add fading effect on ng-bootstrap tabs. 谁能帮助我在ng-bootstrap标签上添加褪色效果。 https://ng-bootstrap.github.io/#/components/tabs
https://ng-bootstrap.github.io/#/components/tabs
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';
不要忘记
import { transition, animate } from '@angular/core';
添加import { transition, animate } from '@angular/core';
in case : https://angular.io/docs/ts/latest/guide/animations.html 万一: https : //angular.io/docs/ts/latest/guide/animations.html
Try This 尝试这个
in your app.component.ts file 在您的app.component.ts文件中
@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 html代码:在您的app.component.html文件中
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.