CODEWITHSUNDEEP
angulartypescriptanimationtabs
Steve Mc
Steve Mc

Reputation: 155

Add animation when switching tabs

I am working with some tabs. Is there a way to add an animation (slide left / right) when I switch tabs?

DEMO

code

  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>

Upvotes: 3

Views: 4862

Answers (2)

BartoszTermena
BartoszTermena

Reputation: 1487

Try to use Angular Animations transitions and triggers, here is my example:

<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

Also check this out:

https://material.angular.io/components/tabs/overview

Upvotes: 4

Rando Shtishi
Rando Shtishi

Reputation: 1512

You can use Angular Animations transitions and triggers. Here you can find more information :https://angular.io/guide/transition-and-triggers.

Upvotes: 0

Related Questions