在切换选项卡时添加动画效果

Question

在切换选项卡时添加动画效果

3

我正在使用一些选项卡。在切换选项卡时有没有一种方法可以添加动画效果（向左/向右滑动）？

代码

  viewMode = 'tab1';


<div class="container">
    <div class="tab-slider--nav">
      <ul class="tab-slider--tabs">
        <li class="tab-slider--trigger" [class.active]="viewMode == 'tab1'" rel="tab1" (click)="viewMode ='tab1'">Tab 1</li>
        <li class="tab-slider--trigger" [class.active]="viewMode == 'tab2'" rel="tab2" (click)="viewMode ='tab2'">Tab 2</li>
      </ul>
    </div>
    <div class="tab-slider--container" [ngSwitch]="viewMode">
      <div id="tab1" class="tab-slider--body" *ngSwitchCase="'tab1'">
        <h2>First Tab</h2>
        <p>Toggle switch style tab navigation. Currently only works with two tabs.</p>
        <p>asdasd.</p>
      </div>
      <div id="tab2" class="tab-slider--body" *ngSwitchCase="'tab2'">
        <h2>Second Tab</h2>
        <p>asdad</p>
      </div>
    </div>
  </div>

- Steve Mc

2个回答

0

你可以使用Angular动画过渡和触发器。在这里您可以找到更多信息: https://angular.io/guide/transition-and-triggers。

- Rando Shtishi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BartoszTermena · Accepted Answer

尝试使用Angular动画过渡和触发器，这是我的示例：

<body style="overflow:hidden">
  <div class="container">
    <div class="tab-slider--nav">
      <ul class="tab-slider--tabs">
        <li class="tab-slider--trigger" [class.active]="viewMode == 'tab1'" rel="tab1" (click)="viewMode ='tab1'">Tab 1</li>
        <li class="tab-slider--trigger" [class.active]="viewMode == 'tab2'" rel="tab2" (click)="viewMode ='tab2'">Tab 2</li>
      </ul>
    </div>
    <div class="tab-slider--container" [ngSwitch]="viewMode">
      <div  id="tab1" class="tab-slider--body" *ngSwitchCase="'tab1'" [@slideInOut]>
        <h2>First Tab</h2>
        <p>Toggle switch style tab navigation. Currently only works with two tabs.</p>
        <p >Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla
          vitae elit libero, a pharetra augue.</p>
      </div>
      <div id="tab2" class="tab-slider--body" *ngSwitchCase="'tab2'" [@slideInOut]>
        <h2>Second Tab</h2>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo
          quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
      </div>
    </div>
  </div>
</body>

TS:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
    animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateX(+100%)'}),
        animate('200ms ease-in', style({transform: 'translateX(0%)'}))
      ]),  
    ]),
  ]
})

Live example: https://stackblitz.com/edit/angular-dfaeek?file=src/app/app.module.ts 请参考：https://angular.io/guide/transition-and-triggers 还可以查看这个：https://material.angular.io/components/tabs/overview