Question

任何人都可以帮助我在ng-bootstrap标签上添加淡化效果。 https://ng-bootstrap.github.io/#/components/tabs

Answer 1

你在问这样的事吗？：

@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>',
})

不要忘记添加import { transition, animate } from '@angular/core';

以防：https://angular.io/docs/ts/latest/guide/animations.html

Answer 2

尝试一下

在您的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代码：在您的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>

将渐变效果添加到angular2 ng-bootstrap选项卡

2 个答案: