动态创建角度动画

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>