動態創建角度動畫

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>