Dynamically create Angular animations
I am creating a paging component that will navigate to the next or previous page in full screen mode. Because of the problems with different browsers and devices, I have given up using CSS transitions for now. I have a working angular solution, but the new problem is that it doesn't scale.
import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('slideTransition', [
state('firstPage', style({ transform: 'translateX(0)' })),
state('secondPage', style({ transform: 'translateX(-100%)' })),
transition('firstPage=>secondPage', animate('0.6s ease')),
transition('secondPage=>firstPage', animate('0.6s ease'))
])]
})
export class AppComponent {
state = 'firstPage';
nextPage() {
this.state = 'secondPage';
}
previousPage() {
this.state = 'firstShowing';
}
}
The problem is, as you can see, when I have, for example, 9 pages. I don't want to define 9 states and 18 transitions. How can I make reusable states or generate runtime states and transitions based on the number of pages? Any ideas?
The template will look something like this:
<div class="container">
<div [@slideTransition]="state" class="page">
<h1>Page 1</h1>
<div class="clicker" (click)="nextPage()">clickity</div>
</div>
<div [@slideTransition]="state" class="page">
<h1>Page 2</h1>
<div class="clicker" (click)="previousPage()">clackity</div>
</div>
</div>
+3
source to share
1 answer
Now I have found a possible solution. Although, since I am using margin-left for the transition, the performance is not as good as it should be.
import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('slideTransition', [
state('previous', style({ marginLeft: '-100%', display: 'none' })),
state('current', style({ marginLeft: '0' })),
state('next', style({ display: 'none' })),
transition('current=>previous', animate('0.6s ease')),
transition('current=>next', animate('0.6s ease')),
transition('next=>current', animate('0.6s ease')),
transition('previous=>current', animate('0.6s ease'))
])
]
})
export class AppComponent {
state = ['current', 'next', 'next'];
current = 0;
next() {
this.current = this.current + 1;
this.updateState();
}
previous() {
this.current = this.current - 1;
this.updateState();
}
private updateState() {
for (let i = 0; i < this.state.length; i++) {
if (i < this.current) {
this.state[i] = 'previous';
} else if (i === this.current) {
this.state[i] = 'current';
} else {
this.state[i] = 'next';
}
}
}
}
and template
<div class="the-host">
<div [@slideTransition]="state[0]" class="fullscreen first">
<h1>Page 1</h1>
<div class="clicker" (click)="next()">next</div>
</div>
<div [@slideTransition]="state[1]" class="fullscreen second">
<h1>Page 2</h1>
<div class="clicker" (click)="previous()">previous</div>
<div class="clicker" (click)="next()">next</div>
</div>
<div [@slideTransition]="state[2]" class="fullscreen third">
<h1>Page 3</h1>
<div class="clicker" (click)="previous()">previous</div>
</div>
</div>
0
source to share