我正在创建一个分页组件,可以滑动到下一个或上一个全屏页面.因为不同浏览器和设备的问题我现在已经放弃了使用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>
解决方法
我现在找到了一个可能的解决方案.虽然因为我使用margin-left进行过渡,但性能并不如预期的那么好.
import { Component } from '@angular/core'; import { animate,[ state('prevIoUs',style({ marginLeft: '-100%',display: 'none' })),state('current',style({ marginLeft: '0' })),state('next',style({ display: 'none' })),transition('current=>prevIoUs',transition('current=>next',transition('next=>current',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>