Angular animation

• Angular animation demo
• Angular animation code

html:

<section class="animation-slider">
  <div *ngFor="let sliderItem of sliderList; let itemIndex = index" >
    <div [@animationDefault]
         [@animationSlider]="sliderIndex"
         *ngIf="sliderIndex === itemIndex + 1">
      <h3>{{ sliderItem }}</h3>
    </div>
  </div>


  <button (click)="prevItem()">Prev</button>
  <button (click)="nextItem()">Next</button>
</section>


<section class="animation-default">
  <h3 [@animationDefault]
      *ngIf="isVisible">Title is visible or not</h3>

  <button (click)="isVisible = !isVisible">Hide/Show</button>
</section>

javascript:

import {Component, OnInit} from '@angular/core';
import {transition, trigger} from '@angular/animations';

import {animationEnter, animationLeave, animationNext, animationPrev} from '@core/animations/animations';


@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.scss'],
  animations: [
    trigger('animationDefault', [
      transition(':enter', animationEnter),
      transition(':leave', animationLeave)
    ]),
    trigger('animationSlider', [
      transition(':increment', animationNext),
      transition(':decrement', animationPrev)
    ])
  ]
})
export class SliderComponent implements OnInit {
  sliderList = [
    'First one',
    'Second item',
    'Third and last one',
    'Fourth item'
  ];
  sliderIndex = 1;
  isVisible = true;

  constructor() {
  }

  ngOnInit(): void {
  }

  prevItem() {
    this.sliderIndex--;
    if (this.sliderIndex < 1) {
      this.sliderIndex = 1;
    }
  }

  nextItem() {
    this.sliderIndex++;
    if (this.sliderIndex > this.sliderList.length) {
      this.sliderIndex = this.sliderList.length;
    }
  }

}

animation.ts:

import {animate, group, query, style} from '@angular/animations';

const animationTiming = '500ms ease-in';

export const animationEnter = [
  query(
    ':self',
    style({position: 'fixed', width: '100%'}),
    {optional: true}
  ),
  style({transform: 'translateX(100%)'}),
  animate(
    animationTiming,
    style({transform: 'translateX(0%)'})
  )
];

export const animationLeave = [
  query(
    ':self',
    style({position: 'fixed', width: '100%'}),
    {optional: true}
  ),
  animate(
    animationTiming,
    style({transform: 'translateX(-100%)'})
  )
];

export const animationNext = [
  query(
    ':enter, :leave',
    style({position: 'fixed', width: '100%'}),
    {optional: true}
  ),
  group([
    query(
      ':enter',
      [
        style({transform: 'translateX(100%)'}),
        animate(
          animationTiming,
          style({transform: 'translateX(0%)'})
        )
      ],
      {optional: true}
    ),
    query(
      ':leave',
      [
        style({transform: 'translateX(0%)'}),
        animate(
          animationTiming,
          style({transform: 'translateX(-100%)'})
        )
      ],
      {optional: true}
    )
  ])
];

export const animationPrev = [
  query(
    ':enter, :leave',
    style({position: 'fixed', width: '100%'}),
    {optional: true}
  ),
  group([
    query(
      ':enter',
      [
        style({transform: 'translateX(-100%)'}),
        animate(
          animationTiming,
          style({transform: 'translateX(0%)'})
        )
      ],
      {optional: true}
    ),
    query(
      ':leave',
      [
        style({transform: 'translateX(0%)'}),
        animate(
          animationTiming,
          style({transform: 'translateX(100%)'})
        )
      ],
      {optional: true}
    )
  ])
];