角のあるアニメーションを動的に作成する

Question

次のまたは前のフルスクリーンページにスライドするページングコンポーネントを作成しています。なぜなら私はCSSの移行を使用して放棄した異なるブラウザやデバイスの問題です。私は動作アニメーションのソリューションを持っていますが、新しい問題はそれが拡大縮小しないということです。

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'; 
    } 

} 

問題は、わかりましたが、たとえば9ページの場合です。私は9つの状態と18の遷移を定義したくありません。再利用可能な状態を実行するか、ページ数に基づいて状態と遷移ランタイムを生成するにはどうすればよいですか？何か案は？

テンプレートは、この

<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> 

Answer 1

ようになり、私は今、可能な解決策を発見しました。移行のために余裕を残して使用しているため、パフォーマンスはそれほど良好ではありません。

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'; 
     } 
    } 
    } 
} 

とテンプレート

<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>