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}
)
])
];